Geek Answers Handbook

JQuery and chrome extension

I am trying to develop a test chrome extension to see how jQuery works with chrome extensions. From the code presented, I think that it should change the background of the popup to yellow.

I tried loading jquery.js using the contents of the script and using the background. When I load it using the background scripts command, it shows that jquery.js is loaded.

Here are my files:

manifest.json

{ "name": "Hello World!", "version": "1.0", "manifest_version": 2, "description": "My first Chrome extension.", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "content_scripts": [ { "matches": ["http://www.google.com/*"], "js": ["jquery.js", "content.js"] } ] }

popup.html

  <html> <head> <script src='jquery.js'></script> <script src='content.js'></script> </head> </html>

content.js

 $('a').css({'background-color': 'yellow'});

I have jquery.js in my extension folder. If someone either gives me something else to try to get this to work, or to show me a really good working example of the chrome extension that binds jquery to, that would be great!

+3
javascript jquery html google-chrome google-chrome-extension
source share
1 answer

You did not have a mixture of things that should not be combined.

One thing you did wrong:
Since you do not want the pop-up window to appear when you click on the browser action button, you should not specify a "default pop-up window":

 ... "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" // <-- this line should go away }, ...

With that said, the best way (imo) to solve the problem is as follows:

  • You have a background page (or better yet an event page ) to listen to the chrome.browserAction.onClicked event.
    (Note that you do not need to configure a default popup to fire an event.)

  • If this happens, use soft injection to enter jquery.min.js and content.js in the active tab using chrome.tabs.executeScript .

  • In order for the above steps to be possible, you must also declare the necessary permissions , namely "tabs" and URL match-patterns of pages that should be available to your extension (for example, "http://*/*" and "https://*/*" to have access to all pages with http and https ).

I would also suggest looking at

background.js:

 // When the user clicks the browser-action button... chrome.browserAction.onClicked.addListener(function(tab) { // ...inject 'jquery.min.js' and... chrome.tabs.executeScript(tab.id, { file: "js/jquery.min.js", allFrames: true, runAt: "document_idle" }); // ...inject 'content.js' into the active tab page chrome.tabs.executeScript(tab.id, { file: "js/content.js", allFrames: true, runAt: "document_idle" }); });

content.js:

 $("a").css({ "background-color": "yellow" });

Feel free to come back if you have any further questions / problems :)

For completeness ...
... let me just mention that other approaches are possible: sush as:

Use page actions instead of browser actions.

Embed each page with your content scripts and start highlighting by sending messages from a background page to content scripts.

+10
source share

More articles:


All Articles