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

Winter · 10月23日

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

回答(1)
时间
W
Winter
1 · 2020-10-23 16:15:14

其实是不能调用目标页面的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);

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序

如果你觉得对你有帮助的话,可以请我喝杯咖啡噢~