Google chrome扩展程序：主网页中的dispatchevent [英] Google chrome extensions: dispatchevent in main web page

问题描述

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

$（'*'）。each （function（i，entity）{
console.log（entity）;
$（entity）.trigger（'mouseenter'）;
}）;


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

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

对不起我的英文不好！

$ b $如果事件监听器是在网页的上下文中定义的（而不是在内容脚本中），那么触发的' 内容中的mouseenter'不会被处理。发生这种情况是因为内容脚本位于孤立的世界。

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

选项1：使用内联JavaScript简单

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

<$ p （函数（i，entity））{\
console.log（entity）; \
$（$）实体）.trigger（'mouseenter'）; \
}）;;

var scriptElement = document.createElement（script）;
scriptElement.innerHTML = script;

document.head.appendChild（scriptElement）;

选项2：可通过网络访问的JavaScript文件

当注入的脚本有很多代码时，这种方法很有用。

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

  $（'*'）。 （函数（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）; 
  

I have in my extension content script. From content script I tried dispatch event at main web page. But event didn't dispatch, nothing. For greater certainty I dispatch events in all elements =)

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

From this article, I found that extension has limited scope and no access to main page script variables.

But can I trigger elements event at main page from extension content script?

Sorry for my bad english!

解决方案

If the event listener was defined in the context of the web page (but not on the content script), then the triggered 'mouseenter' from the content will not be handled. It happens because content scripts live in an isolated world.

To achieve the correct triggering, you need to insert the JavaScript directly into the web page context. You have the following options:

Option 1: simple with inline JavaScript

Insert the code into a <script></script> tag and append it to the document:

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

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

document.head.appendChild(scriptElement);

Option 2: Web accessible JavaScript file

This approach is useful when the injected script has a lot of code.

Create a file in the extension root directory, for example inject.js with the following content:

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

Modify the manifest.json to make it web accessible:

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

And in the content script create a <script/> tag, referencing the inject.js:

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

这篇关于Google chrome扩展程序：主网页中的dispatchevent的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！