jquery - 谷歌浏览器扩展 : dispatchevent in main web page

Question

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

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

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

但是我可以通过扩展内容脚本在主页面触发元素事件吗？

抱歉我的英语不好!

Answer 1

如果事件监听器是在网页的上下文中定义的(而不是在内容脚本中)，则触发 'mouseenter'从内容将不予处理。发生这种情况是因为内容脚本位于 isolated world 中.

要实现正确的触发，您需要将 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)的脚本有很多代码时，这种方法很有用。

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

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

修改manifest.json让它成为web accessible :

{
  "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);