All geek questions in one place

Google Chrome Extension - Need Help

I am new to Google Chrome Extensions and I have some basic questions.

I want to make a Chrome extension, and the following diagram:

-a popup containing buttons and result fields (popup.html)

- when I click the button, I want to trigger an event, this event should connect to the web server (I also make a servlet) and collect information from the server. (XMLHttpRequest ())

- after that I want my extension to load the collected information into one of the result fields.

Simple, right? But I have several problems, right at the beginning :( I started developing using reading tutorials, but I have fog on the main structure of the extension. Now I launched the application containing popup.html, manifest.json ... In popup. html theres result field and button

<div id="extension_container"> <div id="header"> <p id="intro">Result here</p> <button type="button" id="button">Click Me!</button> </div> <!-- END header --> <div id="content"> </div> <!-- END content -->

When the button is pressed, I fire the event using jquery, here:

 <script> $(document).ready(function(){ $("#button").click(function(){ $("#intro").text("Hello, im added"); alert("Clicked"); }); }); </script>

And here is the problem: in popup.html, this does not work, if I load it in Chrome, nothing happens. Otherwise, if I open popup.html in a browser, and not as an extension, everything works fine. So, I think that I have some basic misunderstandings in extension structures, starting from background pages, javascript background, etc. :( Can someone help me?

+3
source share
2 answers

Testing in Chrome 19.0.1084.1 this worked for me ....

popup.html

 <!doctype html> <html> <head> <script src="jquery-1.7.1.min.js"></script> <script src="popup.js"></script> </head> <body> <div id="extension_container"> <div id="header"> <p id="intro">Result here</p> <button type="button" id="button">Click Me!</button> </div> <!-- END header --> <div id="content"> </div> <!-- END content --> </div> </body> </html>

popup.js

 $(document).ready(function() { $("#button").click(function() { $("#intro").text("Hello, im added"); alert("Clicked"); }); });

Possible error
I think that MAY be your problem in that you have "manifest_version": 2 in your manifest, and your popup.html looks something like this.

  <!doctype html> <html> <head> <script src="jquery-1.7.1.min.js"></script> <!--script src="popup.js"></script--> <script> $(document).ready(function() { $("#button").click(function() { $("#intro").text("Hello, im added"); alert("Clicked"); }); }); </script> </head> <body> <div id="extension_container"> <div id="header"> <p id="intro">Result here</p> <button type="button" id="button">Click Me!</button> </div> <!-- END header --> <div id="content"> </div> <!-- END content --> </div> </body> </html>

... this does not work because innt scripts arent allowed in manifest version 2.

+3
source

Are you sure you added the jQuery library with an extra tag like this?

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>

After that, I no longer had any problems. Before I did this, of course, I had the error "$ is undefined".

0
source

Source: https://habr.com/ru/post/912715/

More articles:


All Articles