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

Question

我是铬扩展开发新手。我的示例代码没有正常运行。 要求：执行任何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在同一个文件夹

sample.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 选项卡是活动选项卡，所以我们不需要它的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可能比它大得多（SSCCE的+1）。但是如果它很小，另一种选择是完全省略内容脚本，并用chrome.tabs.executeScript(null,{code:"$('body').hide();"});替换sendMessage。