chrome 扩展中的内容脚本答案

【问题标题】：content script in chrome extensionchrome 扩展中的内容脚本
【发布时间】：2014-07-12 00:06:24
【问题描述】：

我必须通过 chrome 扩展在谷歌搜索页面中添加 div 我的inject.js 文件如下：

var body=document.getElementById("search");

//creates bar and creates bar removal function
var bar = document.createElement("DIV");
function removeBar(){
  bar.remove();
}

//styles bar
var ds = bar.style;
ds.position = "fixed";
ds.width = "512px";
ds.height = "33px";
ds.background = "rgba(0,0,0,0.86)";
ds.zIndex = "9999999999999";

//creates X button and makes it so clicking it runs the removeBar() function
var x = document.createElement("BUTTON");
x.onclick = removeBar;
bar.appendChild(x);

//styles button
var xs = x.style;
xs.background = "black";
xs.borderColor = "black";
xs.color = "rgba(255,255,255,.86)";
xs.position = "fixed";
xs.left = "100%";
xs.marginTop = "5px";
xs.marginLeft = "-29px"

//puts X in button
var xtext = document.createTextNode("X");
x.appendChild(xtext);

//puts bar in page
body.insertBefore(bar, body.children[0]);

我的 manifest.json 如下：

{
  "manifest_version": 2,
  "name": "Inject script in webpage",
  "version": "2.0.1",
  "description": "inject script in webpage.",

  "icons": {
    "48" : "sample-48.png",
    "128" : "sample-128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://www.google.com.pk/*"],
      "js" : ["inject.js"],
      "all_frames": true
    }
  ]
}

但是当我加载谷歌 SERP 页面时，错误消息显示有点像“无法调用 null 的“insertBefore”属性”，似乎变量“body”未定义。通过检查谷歌页面的元素，如果我做错了，我检查了 ID 为“搜索”的 DIV，然后请让我知道我是 chrome 扩展开发的新手

【问题讨论】：

@ZigMandel ？默认是在 DOM 加载后运行，OP 不会改变它。
对不起，你是对的。似乎问题可能是使用了一个名为“body”的变量，将其重命名为其他名称，因为下面的其他引用似乎是指 document.body

标签： google-chrome-extension content-script

【解决方案1】：

问题大概出在这里：

var body=document.getElementById("search");

“body”变量为 null - 可能是因为您要查找的 id 不存在。尝试寻找其他 id（我使用“gbqfb”）。但是，与其在这里给你答案，你真正应该做的是学习使用 Chrome 的内置调试器来找出你的代码不工作的原因。看看这个 youtube 视频：

https://www.youtube.com/watch?v=htZAU7FM7GI

【讨论】：