我有一个上下文菜单选项,当它被选中我想插入一些
HTML.我试过这样做
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText='test123';
但这对我来说并不奏效
注意我试图避免使用jQuery.
解决方法
Here你可以研究如何创建一个扩展名,并下载示例manifest.json.
Content Scripts可以用来运行匹配某些url的js / css.
的manifest.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
}
内容的script.js
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText="test123";
以上将对与http：// * / *匹配的所有URL执行content-script.js,其中*是通配符.所以基本上都是http页面.
当js / css不能被注入到与模式匹配的每个页面时,可以使用Programmatic injection.
下面显示如何执行扩展图标的js onclick：
的manifest.json
{
"name": "Append Test Text","background": {
"scripts": ["background.js"],"persistent": false
},"manifest_version": 1
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'var div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123";'
});
});
这使用executeScript方法,它也有一个选项来调用单独的文件,如下所示：
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
file: "insert.js"
});
});
insert.js
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText="test123";
