运行由 chrome 扩展中的上下文菜单触发的 jquery 脚本

Question

我是 chrome 扩展开发的新手。我的示例代码运行不正常。 要求：在单击上下文菜单按钮时执行任何 jquery 脚本（比如 $("body").hide();)。

从代码来看，只有 jquery 部分不起作用。

我有以下文件：

manifest.json

 {
"manifest_version": 2,
"name": "jQuery DOM",
"version": "1",
"permissions": [
 "contextMenus","tabs","activeTab"
],
"background": {
 "scripts": ["jquery.min.js","sample.js"]
 },
 "description": "Manipulate the DOM when the page is done loading",
 "browser_action": {
 "name": "Manipulate DOM",
 "icons": ["icon.png"],
 "default_icon": "icon.png"
 },
 "content_scripts": [ {
  "js": [ "jquery.min.js", "background.js" ],
  "matches": [ "http://*/*", "https://*/*"],
    "run_at": "document_end"
 }]
 }

background.js

 $("body").append('Test');

我在文件夹中有 icon.png，它加载得很好。 jquery.min.js 在同一个文件夹中

示例.js

            alert("Extension loaded");
            function genericOnClick(info, tab) {
            alert("Tab "+tab.id);
            chrome.tabs.executeScript(tab.id, {
                    file: "jquery.min.js",
                    allFrames: true
                },function(){
                alert("callback");
                  $("body").hide();
                });
            alert("Completed");
            $("body").hide();
            }
            var contexts = ["page"];

            for (var i = 0; i < contexts.length; i++) {
              var context = contexts[i];
              var title = "Test Page menu item";
              var id = chrome.contextMenus.create({"title": title, "contexts":[context],
                                                   "onclick": genericOnClick});
              console.log("'" + context + "' item:" + id);
            }

background.js 有效！ 所有警报工作文件，但 genericOnClick 的 .hide 功能不起作用。 即使我将代码从 sample.js 移动到 backgroud.js，它也不起作用。 你能告诉我哪里出错了吗？

Answer 1

正如我所提到的，后台脚本不允许与 DOM 交互（而内容脚本不允许使用chrome.contextMenus）。您需要将两者结合起来，并使用消息传递来告诉内容脚本何时执行。我做了一些其他的调整：

• 我重命名了 background.js 和 content.js 以便他们现在的名字 反映他们的所作所为，并将background.js 放入活动页面。
• 我删除了浏览器操作（ 扩展需要browserAction.html 或background.js 需要chrome.browserAction.onClicked.addListener 做任何事情 除了显示图标）。
• 以编程方式注入 jquery 意味着始终将其加载为 内容脚本是不必要的（尽管跳过程序注入允许您省略最后三个权限）。
• background.js 不需要 jquery 不再，所以它也没有加载到那里。
• 默认executeScript tab 是活动标签，所以我们不需要它的 id。

这是成品：

manifest.json

{
  "manifest_version": 2,
  "name": "jQuery DOM",
  "version": "1",
  "permissions": [
    "contextMenus", "activeTab", "tabs", "http://*/", "https://*/"
  ],
  "background": {
    "scripts": [ "background.js" ],
    "persistent": false
  },
  "content_scripts": [ {
    "js": [ "content.js" ],
    "matches": [ "<all_urls>" ]
  }],
  "description": "Manipulate the DOM when the page is done loading"
}

background.js

function genericOnClick(info, tab) {
    chrome.tabs.executeScript(null,
                              {"file": "jquery.min.js"},
                              function() {
                                  chrome.tabs.sendMessage(tab.id,{"message":"hide"});
                              });
}


chrome.contextMenus.create({"title": "Test Page menu item",
                            "contexts":["page"],
                            "id":"contextId"});

chrome.contextMenus.onClicked.addListener(genericOnClick);

content.js

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.message == 'hide') {
        $("body").hide();
    }
    sendResponse();
});

您的content.js 可能比这里大得多（+1 表示SSCCE）。但如果它很小，另一种选择是完全省略内容脚本，并将sendMessage 替换为chrome.tabs.executeScript(null,{code:"$('body').hide();"});。