Chrome 扩展 - JS 功能无法识别答案

【问题标题】：Chrome extension - JS function is unrecognizableChrome 扩展 - JS 功能无法识别
【发布时间】：2016-05-08 07:25:51
【问题描述】：

我是 chrome 扩展程序开发的新手。我正在尝试构建一个非常基本的扩展，只是为了看看事情是如何工作的。

我要构建的扩展需要在网页中添加一个按钮以及所有“h1”元素。

这是我的 js 文件：

function myFunction(element) {
    alert(element.innerText);
};


var elements = document.querySelectorAll("h1");

for (var i = 0; i < elements.length; i++)
{
    var element = elements[i];
   // element.innerHTML += "<form><button type='button' value='Copy' onclick='myfunction(element)'></form>";
    element.innerHTML += "<button onclick='myFunction()'>Click me</button>";
};

当我点击按钮时没有任何反应，似乎无法识别“myFunction”。

这是我的清单：

{
  "manifest_version": 2,

  "name": "MagiCopy",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action":
  {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "chrome_url_overrides":
  {
    "newtab" : "newtab.html"
  },

  "background":
  {
    "scripts": ["background.js"]
  },

  "permissions":
  [
    "activeTab",
    "https://ajax.googleapis.com/"
  ],

  "content_scripts":
  [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["myscript.js"],
      "run_at" : "document_end"
    }
  ]
}

我做错了什么？

【问题讨论】：

似乎没有参数传递给myFunction 来提醒？尝试在document 定义或附加myFunction 而不是扩展background.js 页面

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

【解决方案1】：

这里有很多问题，但让我们从最重要的一个开始。

Chrome 扩展程序有自己的内容脚本in an isolated environment。

内容脚本在称为孤立世界的特殊环境中执行。他们可以访问被注入页面的 DOM，但不能访问页面创建的任何 JavaScript 变量或函数。它查看每个内容脚本，就好像它正在运行的页面上没有执行其他 JavaScript。反过来也是如此：页面上运行的 JavaScript 不能调用任何函数或访问任何由内容脚本定义的变量。

当您创建一个附加了内联代码的元素（onclick 作为元素的参数）时，该代码位于页面的上下文中。

由于上下文与您的内容脚本隔离，myFunction 未在其中定义。

这里的正确做法是完全避免内联脚本并使用addEventListener 附加侦听器。

也就是说，下一个问题：您正在操纵 innerHTML 来添加 DOM。那是thoroughly bad idea，因为您可能会破坏状态信息。

element.innerHTML += "something" 的作用如下：

将element 的内容转换为代表DOM 节点的字符串。这会丢弃之后附加到 DOM 节点的所有内容 - 例如事件侦听器。
在该字符串中添加“某物”。
丢弃element内的所有DOM节点。
用结果字符串生成的 DOM 替换 element 的内容。

不要潜在地破坏他人（或您自己）的作品。使用不通过转换为字符串的正确 DOM 操作：创建一个节点，并将其插入（附加）到您想要的节点。

var button = document.createElement("button");
button.text = "Click me";
button.addEventListener("click", myFunction);
element.appendChild(button);

最后，出于某种原因，您期望element 将被传递给myFunction。事件侦听器确实收到了一个参数，但它是 Event 对象。你可以使用它的target 属性，或者，如果我没记错的话，甚至可以在监听器中使用this：

function myFunction(e) { // e is the event
  console.log(e.target);
  console.log(this);
}

【讨论】：