Chrome插件contentscript怎么调用目标页面的js函数和触发页面点击？

Winter

2020-10-23

如题，在开发Chrome插件的时候，怎么让contentscript去调用根页面的js函数，触发页面的点击事件等方法呢？

第4268篇《Chrome插件contentscript怎么调用目标页面的js函数和触发页面点击？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
Winter 2020.10.23

其实是不能调用目标页面的js函数的，也不能访问变量，这点在官方文档里面已经说明了。

详情点击https://developer.chrome.com/extensions/content_scripts#execution-environment

那么怎么去触发目标页面比如按钮的点击事件呢，其实还是有办法的。思路就是用js模拟鼠标点击事件。下面附上源码可参考。

function invokeEle(ele) {
  const event = document.createEvent("MouseEvents");
  const rect = ele.getBoundingClientRect();

  const randomX = parseInt(Math.random() * rect.width);
  const randomY = parseInt(Math.random() * rect.height);
  const randomMenu = parseInt(Math.random() * 200);
  const screenX = rect.left + randomX;
  const screenY = rect.top + randomMenu + randomY;
  const clientX = rect.left + randomX;
  const clientY = rect.top + randomY;

  event.initMouseEvent(
    "click",
    true,
    true,
    window,
    1,
    screenX,
    screenY,
    clientX,
    clientY,
    false,
    false,
    false,
    0,
    null
  );
  ele.dispatchEvent(event);
}

比如你要触发以下这个按钮

<button id="btn">Hello</button>
const btn = document.getElementById("btn");
invokeEle(btn);

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android