Javascript 我们如何调用Chrome内容脚本中的函数；“关于事件”；属性

我们如何从事件属性（例如“onmouseover=”中调用Chrome插件内容脚本中的函数，该属性的元素要么是由代码注入的，要么是源于内容脚本本身，要么是源于dom？

内容脚本在一个孤立的世界中运行，因此它们无法访问页面创建的页面函数或JavaScript对象（就像

窗口中的全局变量一样

）。反之亦然，这就是为什么它被称为“孤立的”

有两种解决方案：

调度一个DOM事件。

---

在页面上下文中运行代码。 用法：

runInPageContext(selector => {
  const el = document.querySelector(selector);
  el.onmouseover(new MouseEvent('mouseover', {bubbles: true}));
  // if you're sure the function doesn't use the event, call it directly:
  // el.onmouseover();
}, '*[onmouseover]');

传递元素是不可能的，但这里有一个解决方法：

// el is an element in DOM
const index = [...document.getElementsByTagName(el.tagName)].indexOf(el);
runInPageContext(index => {
  const el = [...document.getElementsByTagName(el.tagName)][index];
  el.onmouseover(new MouseEvent('mouseover', {bubbles: true}));
}, index);

不会像在阴影中那样工作，但这是一个单独的任务

runInPageContext(selector => {
  const el = document.querySelector(selector);
  el.onmouseover(new MouseEvent('mouseover', {bubbles: true}));
  // if you're sure the function doesn't use the event, call it directly:
  // el.onmouseover();
}, '*[onmouseover]');

// el is an element in DOM
const index = [...document.getElementsByTagName(el.tagName)].indexOf(el);
runInPageContext(index => {
  const el = [...document.getElementsByTagName(el.tagName)][index];
  el.onmouseover(new MouseEvent('mouseover', {bubbles: true}));
}, index);