如何使用Chrome扩展插入HTML？

本文介绍了如何使用Chrome扩展插入HTML？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有一个上下文菜单选项，当它被选中时，我想插入一些HTML。我曾尝试过这样做 var div = document.createElement（div）; document.body.appendChild（div）; div.innerText ='test123'; 但它不适合我。 注意我试图避免使用jQuery。 /developer.chrome.com/extensions/getstarted\">这里您可以研究如何创建扩展并下载样本manifest.json。 内容脚本 可用于运行与某些网址匹配的js / css。 manifest.json {name ：添加测试文本，description：将test123添加到body，version：1.0，permissions：[activeTab ，content_scripts：[ {matches：[http：// * / *]，js：[ content-script.js] } ]，browser_action：{default_title：附加测试文本}， manifest_version：2 } content-script.js var div = document.createElement（div）; document.body.appendChild（div）; div.innerText =test123; 以上将执行 content-script.js http：// * / * 的地址，其中 * 是通配符。所以基本上所有的 http 页面。 内容脚本有很多属性可以在上面的链接中找到。 程序化注入 可以 下面显示了如何执行js onclick 的扩展图标： - $ b $ p manifest.json name：追加测试文本，description：将test123添加到body，version：1.0 ，permissions：[activeTab]，background：{scripts：[background.js]，persistent：false }，browser_action：{default_title：追加测试文本}，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; I have a context menu option and when it is selected I want insert some HTML. I have tried doing thisvar div=document.createElement("div");document.body.appendChild(div);div.innerText='test123';But it's not working for me.Note I am trying to avoid using jQuery. 解决方案 Here you can research how to create an extension and download the sample manifest.json.Content Scripts can be used to run js/css matching certain urls.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}content-script.jsvar div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123";The above will execute the content-script.js for all urls matching http://*/* where * is a wildcard. so basically all http pages.Content scripts have many properties which can be found in the link above.Programmatic injection can be used when js/css shouldn't be injected into every page that matches the pattern.Below shows how to execute the js onclick of the extension icon:-manifest.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.jschrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript({ code: 'var div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123";' });});This uses the executeScript method, which also has an option to call a separate file like so:-background.jschrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript({ file: "insert.js" });});insert.jsvar div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123"; 这篇关于如何使用Chrome扩展插入HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！