Question

我正在编写一个非常简单的Chrome扩展程序，该扩展程序将按钮添加到当前页面。

manifest.json

{
  "manifest_version": 2,
  "name": "chrome-extension-tabs-executescript-add-button-demo",
  "description": "Chrome Extension Add Button Demo",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}

popup.html

<!doctype html>
<html>
<head>
    <title>Chrome Extension Add Button Demo</title>
    <script src="popup.js"></script>
</head>
</html>

popup.js

chrome.tabs.executeScript({
    file: "add-button.js"
}, function() {
    console.log("add-button.js injected")
})

add-button.js

var button = document.createElement("button")

button.innerText = "This is the inserted button, click on me!"
button['id'] = 'inserted'
button['data-name'] = 'name1'
button.onclick = function() {
    alert('clicked!')
}
button.fun = function() {
    alert('fun!')
}

document.body.appendChild(button)

问题

如果我们单击当前页面的扩展程序图标，然后在浏览器的控制台中键入以下代码，这几乎可以正常工作：

let button = document.getElementById('inserted');
button.click();

有警报意味着它正在工作。

但是在调用fun()时：

button.fun();

它报告这种错误：

Uncaught TypeError: button.fun is not a function

不明白为什么缺少fun。

如果需要，还可提供一个简单但完整的演示：https://github.com/chrome-demos/chrome-extension-tabs-executescript-add-button-demo

在其他答案中，我看到内容脚本run in a "isolated world"表示页面和内容脚本仅看到相同的DOM，但没有看到彼此定义的变量。我不解的问题是，onclick和fun都是在DOM上定义的函数，为什么只有其中一个能很好地工作。

我想，代码在内容脚本中运行

button.onclick = function() {
    alert('clicked!')
}
button.fun = function() {
    alert('fun!')
}

定义了两个函数，但是它们并不相同。

onclick是共享DOM的标准属性，因此它可以直接添加到DOM中，这可以在页面上下文中看到。

但是fun方法不是，因此不会被添加到共享DOM中，而是将其添加到其他地方（可能是共享DOM的子实例），只是停留在chrome的范围内内容脚本。

我的猜测正确吗？

Answer 1

您说对了。网页和内容脚本共享相同的事件模型，但具有独立的变量和属性。

将功能分配给button.onclick时，实际上是为现有事件模型设置了一个处理程序。 （顺便说一句，使用onlick=并不是很好的做法）。但是，通过为.fun分配功能-您正在创建一个新属性，该属性将与网页隔离。

按chrome扩展名将按钮插入当前页面，但是某些方法不起作用

manifest.json

popup.html

popup.js

add-button.js

问题

1 个答案: