创建通过击键扩大边距的 Chrome 扩展程序的问题

Question

我敢肯定，有些人可能会告诉我只使用 Stylebot 来更改页面的 CSS 而不是制作我自己的扩展程序，但是 Stylebot 太过分了，因此对于我想做的事情来说太笨重了。每次按Ctrl + M时，我只想将左边距加宽100px。

我认为我有两个关键问题：

1. 从文档中（对我来说）如何更改 a 边距（而不是设置一个，尽管我尝试这样做 也失败了）。目前还不清楚jquery之类的东西如何 在 this answer 中可以适合 this example 在文档中提供的模板（是的，我已经用 jquery 尝试过 包括作为背景脚本）。
2. 我感觉也许我应该使用tab chrome.browserAction.onClicked.addListener(function(tab) 但无法从文档中确定如何确定。

这是我尝试过的许多方法的一个版本（在 background.js 中），使用上面链接的 SO 答案中的代码：

chrome.commands.onCommand.addListener(function(command) {
  if (command == "Ctrl+M") { 
    chrome.tabs.executeScript({code: "$('body').css('margin-left', function(index, curValue) {return parseInt(curValue, 10) + 100 + 'px'}"
  });
 }
}); 

如果出现问题，这里是清单：

{
  "name": "MarginAdjust",
  "description": "Widen margins of websites with Ctrl+M, narrow them with Ctrl+B.",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "commands": {
    "widen_margin": {
      "suggested_key": {
        "default": "Ctrl+M",
        "mac": "Command+M"
      },
      "description": "Widens margin."
    }
  }
}

感谢您的指导。我什至查看了 Stylebot 源代码，试图了解他们是如何做到的，但无法弄清楚。

编辑：可能是因为我需要一个 content_script 来修改页面，但显然是chrome.commands doesn't work with content_scripts?

Answer 1

内容脚本将在一个特殊的隔离世界中执行。它可以访问注入网页中的 DOM 节点，并将页面上的 JavaScript 与扩展中的 javascript 完全分离。所以如果你想注入一段代码来使用jQuery库来操作DOM元素，你需要先将jQuery库注入到网页中。

chrome.tabs.executeScript(null, {file: "jquery.min.js"});
chrome.tabs.executeScript({code: "$('body').css('margin-left', function(index, curValue) {return parseInt(curValue, 10) + 100 + 'px'});"});

内容脚本注入可以通过 chrome.command 回调触发。 onCommand 回调的第一个参数的值将是您在 manifest.json 中声明的命令名称。您在“suggested_key”中定义的组合键只有在该键尚未分配给另一个命令时才会生效。 “Ctrl + M”似乎不起作用，而“Ctrl+Shift+K”对我有用。

"commands": {
  "widen_margin": {
    "suggested_key": {
      "default": "Ctrl+Shift+K"
    },
  "description": "Widens margin."
  }
}

在开发/测试与热键相关的扩展程序时要记住的另一件事是，您需要重新安装扩展程序才能检查更新的命令设置。第一次安装时会采用扩展的命令设置。

我写了一个简单的例子，你可以参考一下

ma​​nifest.json

{
    "name":"MarginAdjust",
    "description": "Widen margins of websites with Ctrl+M, narrow them with Ctrl+B.",
    "version": "1",
    "manifest_version":2,
    "permissions": [
      "activeTab"
    ],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "commands": {
      "widen_margin": {
        "suggested_key": {
          "default": "Ctrl+Shift+K"
        },
        "description": "Widens margin."
      }
    }
}

background.js

chrome.commands.onCommand.addListener(function(command) {
  alert(command);
  if (command == "widen_margin") { 
    chrome.tabs.executeScript(null, {file: "jquery.min.js"});
    chrome.tabs.executeScript({code: "$('body').css('margin-left', function(index, curValue) {return parseInt(curValue, 10) + 100 + 'px'});"});
  }
});