Chrome扩展程序UI注入
到目前为止我所拥有的是：
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": 2,
"permissions": [
"https://*/*",
"http://*/*",
"tabs"
]
}background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'var div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123";'
});
});它所做的：在单击chrome扩展图标时，将<div>test123</div>添加到任何给定页面的<body></body>中。
我想达到的目标是：
与bit.ly Chrome扩展类似，我想在DOM中添加很多内容。单击扩展图标后，我希望添加一个覆盖元素( the <body></body> )和一个侧边栏，在那里我可以添加jQuery选项卡开关。
正如您所看到的，我只是在为StackOverflow创建这个问题时拍摄了这张照片。
问题：
- 关于我当前的进度和/或任何脚本，您可以提交您的答案；我如何给这个附加元素一个ID和/或类名，并检查它是否已经存在于DOM中，然后在单击图标时一次又一次地添加它。
- 如何将许多内容添加到页面中以驻留在我的侧边栏中。jQuery存在于我正在创建的要在其上使用的扩展中。我是否能够创建一个标准的HTML文件，然后获取该文件，然后将其编程注入DOM中，我可以在DOM上使用jQuery脚本来切换选项卡(不是Chrome选项卡，是注入内容中的选项卡)。
回答 1
Stack Overflow用户
发布于 2016-11-23 06:50:50
如果要在布局中添加简单的用户控件，则可以使用动态DOM元素。然而，如果您想要注入一个完整的布局，这可能是一个痛苦。jQuery的函数load可能会派上用场。
您可以将侧边栏的布局放在静态的HTML文件中，并将其与jQuery一起加载到给定的容器中。这样的事情应该可以做到，假设是一个id="myContainer"
jQuery
$('#myContainer').load('layout.html')要回答第一个问题，要向动态创建的元素提供特定ID，只需将其视为DOM元素并为其设置一个id。
JavaScript
var myElement = document.createElement('div');
myElement.id = 'myContainer';
myElement.className = 'kitten-background jumbo button';
// ...
// other properties you may need
// ...
document.body.appendChild(myElement);对于第二个问题，要检查元素是否存在，不妨再次使用jQuery。如果选择器匹配某项内容，则其length属性将大于零，因此这是插入之前检查该$('#myContainer').length == 0的干净验证。
祝你在努力达到的目标上好运，并有乐趣！
https://stackoverflow.com/questions/40757599
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号