JQuery and Chrome Extension

JQuery and Chrome Extension

本文关键字：Extension Chrome and JQuery      更新时间：2023-09-26

我正在尝试开发一个测试chrome扩展，看看JQuery如何与chrome扩展一起工作。 从提供的代码中，我认为它应该将弹出窗口的背景更改为黄色。

我尝试加载jquery.js使用内容脚本和使用背景。 当我通过后台脚本命令加载它时，它显示 jquery.js 已加载。

这是我的文件：

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"]
    }
  ]
}

弹出窗口.html

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

内容.js

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

我的扩展文件夹中也有jquery.js。 如果有人给我其他东西来尝试让它工作，或者可以向我展示一个链接 jquery 的 chrome 扩展程序的非常好的工作示例，那就太好了！

你一直没有把不应该放在一起的东西混在一起。

你做错了一件事：
由于您不希望在单击浏览器操作按钮时出现弹出窗口，因此不应指定"默认弹出窗口"： 

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

话虽如此，解决问题的最佳方法（imo）如下：

  1. 让你的背景页（或者更好的事件页）侦听chrome.browserAction.onClicked事件。
    （请注意，为了触发事件，必须设置默认弹出窗口。

  2. 发生这种情况时，使用编程注入将jquery.min.js注入并使用 chrome.tabs.executeScript 将content.js注入到活动选项卡的页面中。

  3. 为了使上述步骤成为可能，还必须声明必要的权限，即扩展应可访问的页面的"tabs"和 URL 匹配模式（例如 "http://*/*"和"https://*/*"可以访问具有http和https方案的所有页面）。

我还建议，仔细查看清单规范，以熟悉可用字段和可能的值。

最后，一些演示源代码可以帮助您入门（我知道所有这些信息一次可能会让人不知所措）：

扩展文件夹结构：

       _______________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://*/*"
    ]
}

背景.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"
    });
});

内容.js：

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

如果您有进一步的问题/问题，请不要犹豫回来:)

为了完整起见...
...让我提一下，还有其他可能的方法，sush 作为：

  1. 使用页面操作而不是浏览器操作。

  2. 向每个页面注入内容脚本，并通过从背景页面传递到内容脚本的消息来触发突出显示。

相关文章：