通过 chrome://extensions 安装时向页面公开功能

Question

I have a UserScript 运行 @grant none，直接安装在 chrome://extensions 中，没有 Tampermonkey，我正在尝试在主机页面全局命名空间中定义一个函数:

window.setRefinedTwitterLiteFeatures = features => {
  settings = Object.assign(settings, features)
  localStorage.setItem(storageKey, JSON.stringify(settings))
  setFeatures()
}

不幸的是，这似乎不起作用。我也试过使用 unsafeWindow 没有运气。

Answer 1

似乎您按照存储库中的描述安装它 - 直接安装到 chrome://extensions - 但 Chrome 不像 Tampermonkey 那样支持非沙盒环境。模仿它的唯一方法是创建一个 DOM 脚本元素，例如将要公开的代码分配给 textContent 并附加到 document.body。正如规范答案 “Insert code into the page context using a content script”.

中所示

下一个问题是 Twitter 的 CSP 不允许内联脚本元素中的代码。幸运的是，正如我们在主页面请求的 devtools 网络检查器中看到的那样，CSP 有一个 nonce 异常，我们可以重用它：

function runScriptInPageContext(text) {
  const script = document.createElement('script');
  script.text = text;
  script.nonce = (document.querySelector('script[nonce]') || {}).nonce;
  document.documentElement.appendChild(script);
  script.remove();
}

用法示例运行立即代码：

runScriptInPageContext("alert('foo')");

runScriptInPageContext(`(${() => {
  alert('foo');
})()`);

公开全局函数的用法示例：

runScriptInPageContext(function foo() {
  alert('foo');
});

通过 chrome://extensions 安装时向页面公开功能

Expose a function to the page when installed via chrome://extensions

userscripts

google-chrome-extension