Chrome 扩展：将 DIV 附加到内容脚本中的 BODY 元素不起作用答案

【问题标题】：Chrome extension: appending DIV to BODY element within content script not workingChrome 扩展：将 DIV 附加到内容脚本中的 BODY 元素不起作用
【发布时间】：2014-05-23 03:29:08
【问题描述】：

在我的 Google Chrome 扩展中，我想通过将 DIV 附加到 BODY 元素来将一些 HTML 代码注入网站。我当前的测试内容脚本如下所示：

window.onload = function() {
  $('body').css('background-color', 'blue'); // just for testing
  $('body').append("<div>hello world</div>");
};

背景颜色确实变为蓝色。但是，附加 DIV 似乎不是。至少我在页面或页面源代码中找不到任何东西。我在这里错过了什么？

【问题讨论】：

这里可以正常工作，但是如果您将此代码放入 Chrome DevTools 控制台，您可能不应该使用window.load，因为该事件已经被触发，它不会被执行再次。

标签： javascript jquery html google-chrome google-chrome-extension

【解决方案1】：

您不需要添加 window.onload，因为内容脚本会在页面已加载时加载，see this page。记得在manifist中正确添加权限：

"permissions": [
   "activeTab",
   "tabs",
   "http://*/*", "https://*/*"
],
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["js/contentscript.js"]
  }
]

我假设您的内容脚本将加载到所有选项卡中，并从 js 文件夹加载内容脚本。

【讨论】：