Google Chrome 扩展：主网页中的dispatchevent

我的扩展内容脚本中有。从内容脚本中，我尝试在主网页上调度事件。但事件没有发送，什么也没有。为了更加确定，我在所有元素中分派事件 =)

$('*').each(function(i, entity){
    console.log(entity);
    $(entity).trigger('mouseenter');
});

由此article，我发现扩展的范围有限，无法访问主页脚本变量。

但是我可以从扩展内容脚本触发主页上的元素事件吗？

对不起，我的英语不好！

如果事件侦听器是在网页上下文中定义的（而不是在内容脚本上），则触发的'mouseenter'内容将不予处理。发生这种情况是因为内容脚本位于孤立的世界.

为了实现正确的触发，您需要将 JavaScript 直接插入网页上下文中。您有以下选择：

选项 1：简单的内联 JavaScript

将代码插入到<script></script>标记并将其附加到文档中：

var script = "$('*').each(function(i, entity){\
  console.log(entity);\
  $(entity).trigger('mouseenter');\
});";

var scriptElement = document.createElement("script");
scriptElement.innerHTML = script;

document.head.appendChild(scriptElement);

选项 2：Web 可访问的 JavaScript 文件

当注入的脚本有大量代码时，此方法非常有用。

在扩展根目录下创建一个文件，例如inject.js包含以下内容：

$('*').each(function(i, entity){
    console.log(entity);
    $(entity).trigger('mouseenter');
});

修改manifest.json做到这一点网络可访问:

{
  "web_accessible_resources": ["inject.js"]
}

并在内容脚本中创建一个<script/>标签，引用inject.js:

var scriptElement = document.createElement("script");
scriptElement.setAttribute('src', chrome.runtime.getURL('inject.js'));
document.head.appendChild(scriptElement);