从新的 dom 按钮调用内容脚本函数

Question

这是一个非常简单的例子：

清单文件

{
  ...
  "content_scripts": [
    {
      "js": [
        "/js/external/jquery-2.1.3.min.js", 
        "/js/content_script.js"
      ],
      ...
    }
  ],
  ...
}

content_script.js

function demo() {
  alert('demo');
}

$(function() {
  $( "body" ).prepend( 
    "<input type=\"button\" value=\"Press me\" onclick=\"demo()\" />"
  );
});

我在控制台中收到此错误：

{
  ...
  "content_scripts": [
    {
      "js": [
        "/js/external/jquery-2.1.3.min.js", 
        "/js/content_script.js"
      ],
      ...
    }
  ],
  ...
}

如何让功能发挥作用？

Answer 1

这里的问题是孤立世界。

内容脚本有自己的 JS 上下文。您demo在内容脚本上下文中定义。

但是，当添加这样的 DOM 节点时，该onclick属性将引用页面上下文，该功能没有demo。

你在这里有很多选择。

1. 最简单的是在内容脚本上下文中将侦听器附加到节点：

   var node = $('<input type="button" value="Press me"/>').click(demo);
   $("body").prepend(node);
   

2. 另一种方法是demo()在页面上下文中定义。为此，您需要通过标记将代码注入页面上下文<script>。

   var script = document.createElement('script');
   script.textContent = demo.toString();
   (document.head||document.documentElement).appendChild(script);
   script.parentNode.removeChild(script);
   

   请注意，此代码无法访问内容脚本上下文和 Chrome API。但是，它可能很有用，因为它可以访问页面自己的 JavaScript。

3. 如果您需要混合使用两者（同时访问页面和内容脚本），则需要让这两个上下文进行通信。