Question

我是Chrome扩展程序开发的新手。我试图建立一个非常基本的扩展，只是为了看看它是如何工作的。

我想要构建的扩展程序需要添加一个按钮以及所有＆＃34; h1＆＃34;网页中的元素。

这是我的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>";
};

当我点击按钮时没有任何反应，似乎＆＃34; myFunction＆＃34;不被承认。

这是我的清单：

{
  "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"
    }
  ]
}

我做错了什么？

Answer 1

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

Chrome扩展程序的内容脚本正常in an isolated environment。

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

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

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

这里执行此操作的正确方法是完全避免内联脚本编写，并使用addEventListener附加侦听器。

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

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

将element的内容转换为表示DOM节点的字符串。这会丢弃之后附加到DOM节点的任何内容 - 比如事件侦听器。
在该字符串中添加“something”。
放弃element内的所有DOM节点。
将element的内容替换为从结果字符串生成的DOM。

不要潜在地破坏别人的（或你自己的）工作。使用不通过转换为字符串的正确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);
}

Chrome扩展程序 - JS功能无法识别

1 个答案: