javascript - Safari 扩展 : How do you inject content scripts only after a toolbar button is clicked?

Question

在我的扩展程序中，我需要在单击工具栏图标时执行操作。但是，涉及到很多脚本和样式表，所以我想避免使用普通的“内容脚本”，因为它们总是会加载到用户访问的每个页面中，从而减慢他们的浏览器速度。相反，我只想在单击按钮后注入(inject)脚本。

文档只说了以下内容:

If you need the command [i.e., a toolbar button click] to initiate an action in an injected script, respond to the command in the global HTML page or an extension bar and send a message to the script.

在 Chrome 中，您可以使用 chrome.tabs.executeScript()

在 Firefox 中，您可以使用 tabs.activeTab.attach()

如何在 Safari 中做到这一点？

Answer 1

您可以使用以下四种方法将内容有条件地注入(inject)页面:

safari.extension.addContentScript
safari.extension.addContentScriptFromURL
safari.extension.addContentStyleSheet
safari.extension.addContentStyleSheetFromURL

Documentation here .

但是，请注意，这些方法不会在您调用它们时将内容注入(inject)任何已经存在的选项卡。因此，它们可能不适合您的用例。您可以使用其中一种方法，然后重新加载选项卡，但由于用户体验不佳，您可能不希望这样做。

相反，您可能需要使用这样的技术:将一个非常轻量级的内容脚本注入(inject)每个页面，其唯一工作是监听来自扩展程序全局页面的消息，并在收到指示时创建适当的<script>和 <style>或 <link>要注入(inject)的内容的元素。然后，当您的工具栏按钮被点击时，让全局页面将适当的消息传递给内容脚本，可能包括所需内容的 URL。

这种方法的缺点是注入(inject)的脚本(通过创建 <script> 标记添加的脚本)将无法直接与全局页面或扩展的其他部分通信。如果您需要他们进行交流，他们将需要使用 window.postMessage 进行交流或其他一些技术。

这是一个最小的例子。假设您的扩展有一个工具栏项，它发出命令“inject-content”。

在全局页面中:

safari.application.addEventListener('command', function (evt) {
    safari.application.activeBrowserWindow.activeTab.page.dispatchMessage(evt.command);
}, false);

在始终注入(inject)的内容脚本中:

safari.self.addEventListener('message', function (evt) {
    if (evt.name == 'inject-content') {
        var myScriptTag = document.createElement('script');
        myScriptTag.src = safari.extension.baseURI + 'my_script.js';
        document.body.appendChild(myScriptTag);
    }
}, false);