Chrome扩展content script调用元素click方法触发Content Security Policy错误如何解决

解决方案 #

方案1：手动派发点击事件（适用于业务逻辑绑定在click事件监听器的场景） #

HTMLElement.click() 方法执行时会先触发元素绑定的点击监听逻辑，再执行href对应的跳转动作。你可以手动派发鼠标点击事件，同时阻止默认的href跳转，既可以触发原有绑定的业务逻辑，又不会触发javascript:协议的执行被CSP拦截：

const currencySelectorLink = document.getElementById('switcher-info');
// 构造标准点击事件
const clickEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window
});
// 临时监听阻止默认跳转，执行后自动销毁
currencySelectorLink.addEventListener('click', e => e.preventDefault(), { once: true });
// 触发事件
currencySelectorLink.dispatchEvent(clickEvent);

方案2：提取javascript:协议逻辑直接执行（适用于业务逻辑写在href属性内的场景） #

如果原网站的业务逻辑直接写在href的javascript:后面，可以把这段逻辑提取出来，注入到页面原生上下文执行：

const currencySelectorLink = document.getElementById('switcher-info');
// 提取href中的js代码，去除前缀
const inlineJs = currencySelectorLink.href.replace(/^javascript:/, '');
// 创建script标签注入页面上下文执行
const scriptEl = document.createElement('script');
scriptEl.textContent = inlineJs;
document.documentElement.append(scriptEl);
// 执行后立即移除标签
scriptEl.remove();

如果页面CSP禁止内联脚本执行，可以给注入的script添加页面CSP允许的非对称哈希/随机数属性，或者将逻辑打包为独立的外部脚本引入。

内容的提问来源于stack exchange，提问作者Giedrius Stanevičius II