javascript 如何插入带有 chrome 扩展的 HTML？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19103183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert HTML with a chrome extension?
提问by Ziamor
I have a context menu option and when it is selected I want insert some HTML. I have tried doing this
我有一个上下文菜单选项，当它被选中时，我想插入一些 HTML。我试过这样做
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText='test123';
But it's not working for me.
但这对我不起作用。
NoteI am trying to avoid using jQuery.
注意我试图避免使用 jQuery。
回答by BenG
Hereyou can research how to create an extension and download the sample manifest.json.
在这里您可以研究如何创建扩展并下载示例 manifest.json。
Content Scriptscan be used to run js/css matching certain urls.
内容脚本可用于运行匹配特定 url 的 js/css。
manifest.json
清单文件.json
{
"name": "Append Test Text",
"description": "Add test123 to body",
"version": "1.0",
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["content-script.js"]
}
],
"browser_action": {
"default_title": "Append Test Text"
},
"manifest_version": 2
}
content-script.js
内容脚本.js
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText="test123";
The above will execute the content-script.jsfor all urls matching http://*/*where *is a wildcard. so basically all httppages.
以上将为content-script.js所有匹配http://*/*where*是通配符的url执行。所以基本上所有http页面。
Content scripts have many properties which can be found in the link above.
内容脚本有许多属性，可以在上面的链接中找到。
Programmatic injectioncan be used when js/css shouldn't be injected into every page that matches the pattern.
当不应该将 js/css 注入到与模式匹配的每个页面时，可以使用程序化注入。
Below shows how to execute the js onclickof the extension icon:-
下面展示了如何执行onclick扩展图标的js ：-
manifest.json
清单文件.json
{
"name": "Append Test Text",
"description": "Add test123 to body",
"version": "1.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Append Test Text"
},
"manifest_version": 1
}
background.js
背景.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'var div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123";'
});
});
This uses the executeScriptmethod, which also has an option to call a separate file like so:-
这使用了executeScript方法，该方法还可以选择调用单独的文件，如下所示：-
background.js
背景.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
file: "insert.js"
});
});
insert.js
插入.js
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText="test123";
