javascript - 如何将这个非常简单的 pageAction Chrome 扩展程序移植到 Firefox 和 Safari 上运行

Question

这是一个使用 pageAction 的非常简单的 Chrome 扩展。它评估当前 URL，如果 URL 匹配条件(实际上是位置)，则在地址栏中放置一个图标，并在用户单击该图标时将 URL(使用原始位置的一点)更改为新位置。

构建 Chrome 扩展非常简单直接。文档很简单，Google 提供了一些可以改编和构建的代码示例。最后，CWS 易于部署。

但是，我没有任何尝试在 FF 或 Safari 中执行相同操作的经验。

有人可以通过一些代码示例和包装建议给我一些指导吗？

谢谢!

Background.js

function checkForValidUrl(d, c, e) {
    if (c.status === "loading") {
        var b = e.url.split("/")[2];
        var a = e.url.split("/")[3];
        if (b === "www.somewhere.com" && a === "unfiled") {
            chrome.pageAction.show(d)
        }
    }
}
chrome.tabs.onUpdated.addListener(checkForValidUrl);
chrome.pageAction.onClicked.addListener(function (b) {
    var a = b.url.split("/")[4].split("+").slice(0, 1);
    chrome.tabs.update(b.id, {
        url: "http://www.somewhere.com/filed/" + a
    })
});

list

{
  "name": "MyExtension",
  "version": "1.0",
  "description": "This is nifty",
  "background": { "scripts": ["background.js"] },
  "page_action" :
  {
    "default_icon" : "icon-19.png",
    "default_title" : "Click to do your stuff"
  },
  "permissions" : [
    "tabs"
  ],
  "icons" : {
    "48" : "icon-48.png",
    "128" : "icon-128.png"
  },
  "manifest_version": 2
}

Answer 1

此答案仅适用于 Safari。

对于此扩展的 Safari 版本，您需要的原 Material 是:

• “全局”HTML 页面(Safari 相当于 Chrome 扩展程序的背景页面)
• 在全局页面上运行的脚本，作为内联提供 <script>或者作为 .js 文件
• 工具栏按钮的图标，在 Safari 扩展术语中称为“工具栏项”

使用 Extension Builder 创建一个新的空扩展后，在扩展的文件夹中创建上述文件，或将它们移动到扩展的文件夹中。在 Extension Builder 中，选择您的全局页面。创建一个工具栏项，给它一个标签和一个标识符，然后选择工具栏按钮图像。您还需要为工具栏项指定一个命令；只需输入任何字符串，例如“munge-url”。

在您的全局脚本中，您将为“命令”事件添加一个监听器，当用户单击您的工具栏按钮时，Safari 会将其发送到全局页面。监听函数将读取当前选项卡的 URL，对其进行修改，并将选项卡的 URL 设置为修改后的选项卡。像这样:

safari.application.addEventListener('command', function (evt) {
    if (evt.command == 'munge-url') {
        var currentTab = safari.application.activeBrowserWindow.activeTab;
        var oldUrl = currentTab.url;
        var newUrl = mungeUrl(oldUrl);
        currentTab.url = newUrl;
    }
}, false);

mungeUrl当然，需要定义函数。

应该就是这样了。如果你想花哨一点，你可以添加代码，根据当前选项卡的 URL 禁用或启用工具栏按钮；为此，您需要一个“验证”事件的监听器，这在 this page 上进行了讨论。 Safari 扩展开发指南。