Question

到目前为止我所拥有的：

的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>。

我想要实现的目标：

类似于Chrome扩展程序，我想在DOM中附加大量内容。单击扩展图标后，我希望将一个叠加元素添加到<body></body>以及侧栏，我可以在其中添加jQuery选项卡开关。

正如您所看到的，我在为StackOverflow创建此问题时拍摄了这张照片。

问题：

关于我目前的进展和/或您提交答案的任何脚本;我如何为这个附加元素提供一个ID和/或类名，并在点击图标之前反复添加它之前检查它是否已存在于DOM上。
如何将大量内容附加到页面以驻留在我的侧边栏中。 jQuery存在于我正在创建此扩展程序的网站中。我能够创建一个标准的HTML文件然后被提取，然后编程注入到DOM中，我可以使用jQuery脚本来处理切换选项卡（不是Chrome选项卡，注入内容中的选项卡）。

Answer 1

为什么不看看bit.ly扩展是如何做到的呢？

查看代码，bit.ly将一个固定位置，100％宽度/高度iframe附加到包含＆＃34; app＆＃34;包中的页面。再次单击将删除iframe。有一些特殊的代码可以使用框架集页面（我在这里没有评论），但除此之外，这是一般的想法。

页面的一部分是半透明的，这给出了侧边栏的错觉，但确实覆盖了整个页面。这是最简单的方法，因为否则你可能会破坏页面的布局，而且没有通用的魔法＆＃34;解决方案，无处不在，让您的内容并排。

// 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);
}

要完全控制用户界面的外观，最好注入一个框架，因为网页自带的CSS和脚本不会出现＆＃34;出血＆＃34;进入你的背景。无论您想要什么样的库，都可以像普通页面一样包含在那里。

如果你强烈反对使用框架的想法，你可以尝试将你的UI直接注入页面 - 但要注意干扰/不兼容的代码，限制性的CSP和CSS渗透。这个问题是相关的：How to really isolate stylesheets in the Google Chrome extension?

您可以将上述代码段作为单独的文件，并使用带有file属性的executeScript来注入它们。它们不需要像jQuery这样的库。

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

Answer 2

如果要在布局中添加简单的用户控件，则可以采用动态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是一个干净的验证。

祝你好运，想要获得乐趣！

Chrome扩展程序化UI注入

到目前为止我所拥有的：

我想要实现的目标：

问题：

2 个答案: