我是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在同一个文件夹中
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,它也行不通。 你能告诉我哪里出错了吗?
答案 0 :(得分:0)
正如我所提到的,不允许后台脚本与DOM交互,(不允许内容脚本使用chrome.contextMenus
)。您需要将两者结合起来,并使用消息传递来告诉内容脚本何时执行。我做了一些其他调整:
background.js
和content.js
以便他们的名字
反映他们的行为,并将background.js
纳入活动页面。browserAction.html
或background.js
需要chrome.browserAction.onClicked.addListener
做任何事情
除了显示图标)。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
可能比此处大得多(SSCCE为+1)。但如果它很小,另一种选择是完全省略内容脚本,并用sendMessage
替换chrome.tabs.executeScript(null,{code:"$('body').hide();"});
。