捕获中间点击并替换 URL 的 Chrome 扩展程序

Question

我对 chrome 扩展完全陌生，但我已经阅读了入门并从 Google 组装了示例。我想构建一个扩展，当它处于活动状态时，它会捕获 mydomain.com 上的鼠标中键单击事​​件、读取 URL、修改它并使用新创建的 URL 启动新选项卡。

据我目前了解，我需要一个 manifest.json 文件和一个 my_script.js 文件，它们将被注入到所有 mydomain.com 页面加载中。它是否正确 ？如果是，我接下来应该如何进行，我应该在清单和 javascript 文件中添加什么来完成给定的任务。一些代码示例将不胜感激。

我还在 stackoverflow 上阅读了couple of answers here，如果要使用browserAction，它只能在扩展页面中使用，因此您不能在内容脚本中使用它。这意味着我必须将我的代码放在后台页面而不是 my_script.js 中。请建议我应该如何进行。

谢谢

工作脚本解决方案是：

$(document).click(function(e) {
    var urlToGo = window.location.href;

    // middle button
    if (e.which == 2) {
        urlToGo = "http://google.com"; 
        window.open(urlToGo);       
        e.preventDefault();
        e.stopPropagation();
    }
});

Answer 1

您可以从我的简单 Chrome 扩展内容脚本骨架https://github.com/robin-drexler/Simple-Chrome-Extension-Content-Script-Skeleton 开始，它提供了一个清单和一个内容脚本，将在您访问的每个页面上执行。

现在您可以继续并实现您想要的功能。 然后您可以使用window.open 打开一个新标签/窗口（更简单的方法）或使用原生 Chrome API 打开一个新标签。

window.open（在内容脚本中）

 $(function() {
        $(document).on('click', function(e){
            //do some replace magic here
            var url = 'http://google.com';
            if (e.which === 2) {
                window.open(url);       
            }        
        });
    });

http://jsfiddle.net/886jY/2/

Chrome API 的有趣读物

后台页面和内容脚本之间的消息传递。 IIRC 您只能在后台页面中使用 CHrome Tab API。 http://developer.chrome.com/extensions/messaging.html

Chrome 标签 API http://developer.chrome.com/extensions/tabs.html

Answer 2

顺便说一句，中间按钮可能不是一个好主意，因为它是最多余的，用户最不常用的，甚至可能在某些设备中丢失，尤其是在触摸屏上。您可能应该重新考虑您的方法以支持使用第一个鼠标按钮，可以通过您自己提到的浏览器操作按钮或更好的页面操作按钮有条件地启用或禁用您的扩展，因为您想要仅适用于特定域。

至于您感兴趣的代码（用于中间按钮），它与扩展没有什么特别之处，它只是与页面的 DOM 一起工作的常用 JavaScript，您的内容脚本在其中注入。例如，您可以为点击绑定处理程序，如下所示：

document.onmousedown = mouseDown;

function mouseDown(e)
{
  var midclick;
  if (!e) var e = window.event;
  if (e.which) midclick = (e.which == 2);
  else if (e.button) midclick = (e.button == 4); // MS
  if (midclick)
  {
    var target;
    if (e.target) target = e.target;
    else if (e.srcElement) target = e.srcElement;
    if (target.innerHTML) // do stuff what you need here,
    {                     // assume get all the content as url
      openNewURL(target.innerHTML);
    }
  }
}

function openNewURL(newurl)
{
  chrome.extension.sendMessage({url: newurl}, function(response) {});
}

您的第一个理解是正确的：您需要清单和内容脚本，以及背景页面。

在后台页面处理传入的请求：

chrome.extension.onMessage.addListener(
function(request, sender, sendResponse)
{
  if (request.url)
  {
    chrome.tabs.create({url: request.url});
  }
});

Answer 3

您需要让 manifest.json 声明一个内容脚本，这是将为每个页面运行的 js 文件（如果您将属性设置为“all_frames”，则递归到文档中的每个框架为 true )。

检查此示例 manifest.json：

{
  "name": "MyExtension",
  "version": "0.2",
  "manifest_version": 2,
  "description": "My description.",
  "content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["jquery.js", "my_javascript_to_execute_on_each_frame.js"],
    "all_frames": true
  }
  ]
}

使用此清单，您必须提供 jquery（可选）和单个 js 文件，其中包含用于侦听鼠标单击、更改当前文档的 url 并打开新选项卡的代码。这个脚本可能是这样的：

​$(document).click(function(e)​ {
    var urlToGo = window.location.href;

    // middle button
    if (e.which === 2) {
        urlToGo = ... // do your url hackery =)
        window.open(urlToGo);       
        e.stopPropagation();
    }

});
    ​