Question

我确信有些人可能会试图告诉我只是使用Stylebot来改变页面的CSS而不是自己的扩展，但是Stylebot是过度的，因此对于我想做的事情来说太笨重了。我只想在每次按Ctrl + M时将左边距加宽100px。

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

从文档中了解如何更改 a并不完全清楚（对我而言）保证金（与设定保证金相反，尽管我试图这样做也失败了）。目前还不清楚像jquery这样的东西 this answer中的this example可以放在文档上由chrome.commands doesn't work with content_scripts提供的模板中（是的，我已经尝试过使用jquery 作为背景脚本加入。）
我觉得也许我应该以某种方式使用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来修改页面，但显然是{{3}}？

Answer 1

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

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中声明的命令名称。您在＆＃34; suggest_key＆＃34;中定义的组合键仅当密钥尚未分配给另一个命令时才会生效。＆＃34; Ctrl + M＆＃34;似乎不起作用＆＃34; Ctrl + Shift + K＆＃34;为我工作。

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

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

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

<强>的manifest.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'});"});
  }
});

创建Chrome扩展程序时出现问题，通过按键扩大了边距

1 个答案: