Javascript 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扩展图标后，它会将

test123

添加到任何给定页面的

---

我希望达到的目标是： 与bit.ly Chrome扩展类似，我想在DOM中添加大量内容。单击扩展图标后，我希望在

中添加一个覆盖元素以及一个侧栏，在侧栏中可以添加jQuery选项卡开关

正如你们所看到的，我刚刚在为StackOverflow创建这个问题时拍下了这张照片

问题：

关于我目前的进展和/或您可能随答案提交的任何脚本；我如何给这个附加元素一个ID和/或类名，并在单击图标反复添加它之前检查它是否已经存在于DOM中

如何将大量内容附加到页面以驻留在侧边栏中。jQuery存在于我创建此扩展的站点中。我是否能够创建一个标准的HTML文件，然后将其获取并通过编程注入DOM，我可以使用jQuery脚本来切换选项卡（不是Chrome选项卡，而是注入内容中的选项卡）

---

如果要在布局中添加简单的用户控件，那么动态DOM元素可能是一种方法。然而，如果你想注入一个完整的布局，这可能是一个痛苦。jQuery的功能可能很方便

您可以将侧边栏的布局放在一个静态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

---

祝你好运，你正在努力实现和乐趣

为什么不看看bit.ly扩展有多大作用

查看代码，bit.ly将一个固定位置、100%宽度/高度的iframe附加到包含包中的“app”页面的页面上。再次单击将删除iframe。有一些特殊的代码用于处理框架集页面（我在这里不作评论），但除此之外，这是一般的想法

页面的一部分是半透明的，这给人一种侧边栏的错觉，但它确实覆盖了整个页面。这是最简单的方法，因为否则你会有破坏页面布局的风险，而且没有一个通用的“神奇”解决方案可以让你的内容随处可见

// Injection
var iframe = document.createElement("iframe");
iframe.id = "my-awesome-extension-iframe";
iframe.style.width = "100%";
/* ..more styling like that.. */
iframe.src = chrome.runtime.getURL('my_ui.html');
document.body.appendChild(iframe);

// Removal
var iframe = document.getElementById("my-awesome-extension-iframe");
if (iframe) {
  iframe.parentNode.removeChild(iframe);
}

要完全控制UI的外观，最好是注入一个框架，因为页面本身的CSS和脚本不会“出血”到您的上下文中。无论您想要什么库，都可以像在普通页面中一样包含在其中

如果你强烈反对使用框架的想法，你可以尝试将你的用户界面直接注入到页面中——但要小心干扰/不兼容的代码、限制性的CSP和CSS。这个问题是相关的：

您可以将上述代码段作为单独的文件，并使用带有file属性的

executeScript

来插入它们。它们不需要像jQuery这样的库

---

请注意，该框架中的代码将具有与内容脚本代码相同的权限级别-如果您需要内容脚本中不可用的API，则需要向后台发送消息来执行此操作。您还需要列出页面本身及其所有资源。

Hiya Frederik.L，到目前为止，您的答案中包含的内容我完全理解，并且我已经在我正在开发的网站上使用过，但是我不知道如何在我的

background.js

文件中实现这一点。您是否可以用一个非常小的基于jQuery的示例来修改您的答案，而不必遵循我希望实现的任何细节？谢谢你和+Ranswer在chrome扩展的上下文中是不正确的，因为它不知道上下文（弹出窗口、内容、背景）。参见Xan的回答。我假设上下文确实是可访问的。为此，我通常会在文档中附加一个脚本标记。如果我们需要一个上下文脚本，而不需要实际访问上下文，那么每次添加一行可能都会遇到麻烦。我发现的一种干净的方法是插入一个脚本标记，该标记引用扩展范围中的脚本。顺便说一下，到目前为止，您提供的代码不需要

tabs

权限。它只需要读取当前选项卡的URL。即使是考虑到<代码>“ActueTabb”<代码>权限。我已经仔细检查了BITY。但是它有一个文件，里面有42000行，我根本不知道我到底在找什么。所以在

my_ui.html

中，我基本上可以创建一个我习惯于创建的网站？另外，我的理解是，在服务器不在本地的站点上使用iframe意味着它无法与页面交互，如果我错了，请更正jme，因为扩展工作对我来说是新的。谢谢你提出的非常有用的建议+R这42000行代码大部分是UI本身的代码，而注入/删除UI的代码并没有那么大。分析扩展应该从清单开始，然后从后台脚本开始，寻找特定的

chrome.*

调用。“另外，我的理解是，在站点上使用iframe对服务器来说不是本地的，这意味着它无法与页面交互，如果我错了，请纠正jme，因为扩展工作对我来说是新的。”这是正确的。然而，你可以有一个conte