javascript - JQuery and Chrome Extension - Stack Overflow

IT技术

更新时间：2025-03-162

admin管理员组
文章数量:1323707

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

I have tried loading the jquery.js using a content script and using background. When I load it via the background scripts mand, it shows that jquery.js was 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": ["/*"],
      "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 the jquery.js in my extension folder as well. If someone get either give me something else to try to get this working, or could show me a really good working example of a chrome extension that links jquery, that would be great!

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

I have tried loading the jquery.js using a content script and using background. When I load it via the background scripts mand, it shows that jquery.js was 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./*"],
      "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 the jquery.js in my extension folder as well. If someone get either give me something else to try to get this working, or could show me a really good working example of a chrome extension that links jquery, that would be great!

Share Improve this question asked Oct 18, 2013 at 20:29 user2200175 452 silver badges4 bronze badges

Exactly, what's the problem? It should work. Take a look at this site: carl-topham./theblog/post/… – yarl Commented Oct 18, 2013 at 20:49
When I load the plugin and click it, it just shows a small popup box with a little gray box in the lower right and corner. – user2200175 Commented Oct 18, 2013 at 21:07
I tried that link, but I still cannot get it to work. I updated the manifest_version 2 , got jQuery 1.10.2 min in the folder and when I click the plugin nothing happened. I also updated the background_page to "background": {"page": "background.html"} – user2200175 Commented Oct 18, 2013 at 23:09
You have mixed things up a little. What are you trying t achieve ? Make the background of each a element on 'google.*' automatically yellow ? Or have a button, that when clicked turns the background of each a element of the active tab's page yellow ? – gkalpak Commented Oct 19, 2013 at 14:31
@user2200175 Knock, knock ! Did you try my proposed solution below ? Did you get this to work ? – gkalpak Commented Oct 25, 2013 at 6:23

Add a ment |

1 Answer 1

Sorted by: Reset to default 11

You've been short of mixing things up that shouldn't go together.

One thing you've been doing wrong:
Since you don't want a popup to appear when clicking on your browser-action button, you should not specify a "default-popup":

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

With that said, the best way (imo) to approach the problem is the following:

Have your background-page (or better yet event-page) listen for the chrome.browserAction.onClicked event.
(Note that in order for the event to be triggered, no default-popup must be set up.)
When that happens, use programmatic injection to inject jquery.min.js and content.js into the active tab's page, using chrome.tabs.executeScript.
In order for the aforementioned steps to be possible, you must also declare the necessary permissions, namely "tabs" and the URL match-patterns of the pages that should be accessible to your extension (e.g. "http://*/*" and "https://*/*" to have access to all pages with the http and https schemes).

I would also suggest, taking a good look at the manifest specification in order to familiarize with the available fields and possible values.

Finally, some demo source code to get you started (I know all that info at once can be overwhelming):

Extension folder structure:

       _______________LinkHighlighter_______________
      |                      |                      |
manifest.json               img                     js
                             |                      |__background.js
                        icon<XX>.png(*)             |__content.js
                                                    |__jquery.min.js
(*): <XX> = 16, 19, 38, 48, 128

manifest.json:

{
    "manifest_version": 2,

    "name": "Link Highlighter",
    "version": "1.0",
    "description": "...",
    "icons": {
         "16": "img/icon16.png",
         "48": "img/icon48.png",
        "128": "img/icon128.png"
    },

    "browser_action": {
        "default_title": "Link Highlighter",
        "default_icon": {
            "19": "img/icon19.png",
            "38": "img/icon38.png"
        }
    },
    "background": {
        "persistent": false,
        "scripts": ["js/background.js"]
    },

    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ]
}

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's page
    chrome.tabs.executeScript(tab.id, {
        file: "js/content.js",
        allFrames: true,
        runAt: "document_idle"
    });
});

content.js:

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

Don't hesitate to e back, should you have further questions/problems :)

For the sake of pleteness...
...let me just mention that thre are other approaches possible, sush as:

Using page-actions instead of a browser-action.
Injecting every page with your content scripts, and trigger the highlighting by means of message-passing from the background-page to the content scripts.

本文标签： javascriptJQuery and Chrome ExtensionStack Overflow

版权声明：本文标题：javascript - JQuery and Chrome Extension - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1742130717a2422146.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - JQuery and Chrome Extension - Stack Overflow

1 Answer 1

更多相关文章