作为 Google Chrome 扩展程序在网页中自动加载书签

Question

基本上我制作了一个书签，我希望它在打开某个通配符 URL 时运行。由于某些原因，它不会简单地在 Chrome 扩展中作为 javascript 运行，而且我厌倦了尝试。

我认为可以工作的是为指定页面创建一个具有content_script的扩展（允许通过match使用通配符） ，并且以某种方式使其执行与用户单击书签栏中的小书签相同的操作。

但是，我不知道该怎么做。

需要注意的一件事是，我需要它来访问页面的全局范围，即突破扩展沙箱（这是可能的，并且已被确认在 Chromium bug 跟踪器中的设计是可能的）。

所以问题又是：如何从 content_script 中“加载小书签”（换句话说，如何将小书签转换为 Google Chrome扩展名）。我也有纯 JavaScript 版本，如果有用的话。

这是小书签，以防有人想用它进行测试。它适用于 my.deviantart.com/messages/* （但是您需要一个帐户和收件箱中的消息，才能看到悬停在“偏差”链接顶部的效果，并且它将显示带有缩略图的工具提示）。

（编辑： 这是一个扩展尝试，发布在答案的评论中）

Answer 1

如果您将 URL 放入清单的权限部分，则可以从内容脚本进行跨域调用...
http://code.google.com/chrome/extensions/xhr.html

似乎令人窒息的是您放入请求网址中的回调，而这并不需要，所以我将其取出。
这是您的代码的工作版本......
Manifest

{
  "name": "dA Tooltip Thumbnail",
  "version": "1.0.0",
  "description": "What the name says.",
  "permissions": [
    "http://backend.deviantart.com/*"
  ],
  "icons": {
    "48" : "sample-48.png",
    "128" : "sample-128.png"
  },
  "content_scripts": [
    {
      "matches": ["http://my.deviantart.com/messages/*"],
      "js" : ["jquery-1.7.1.min.js","contentscript.js"]
    }
  ]
}

ContentScript

$(".mcb-title a:first-child").each(function() {
    var b=$(this).attr("href");
    null!=b.match(/https?:\/\/fav\.me\/.*|https?:\/\/.*\.deviantart\.com\/art.*/)&&"true"!=$(this).attr("da-message-preview-attached")&&$.getJSON("http://backend.deviantart.com/oembed?url="+encodeURIComponent(b),$.proxy(function(b) {
        $(this).addClass("da-message-preview").attr("rel",b.thumbnail_url).attr("da-message-preview-attached","true");
        $(this).hover(function(a) {
            window.daMessagePreviewTitle=this.title;
            this.title="";
            $("body").append('<p id="da-message-preview"><img src="'+this.rel+'"/></p>');
            $("#da-message-preview").css( {top:a.pageY-10+"px",left:a.pageX+30+"px",position:"absolute",border:"1px solid #666",background:"#EEE",padding:"5px",display:"none","-webkit-border-radius":"6px","-moz-border-radius":"6px","border-radius":"6px","-webkit-box-shadow":"0px 2px 8px #000","-moz-box-shadow":"0px 2px 8px #000","box-shadow":"0px 2px 8px #000","z-index":"123456"}).fadeIn("fast")
        },function() {
            $("#da-message-preview").remove()
        });
        $(this).mousemove(function(a) {
            $("#da-message-preview").css("top",a.pageY-10+"px").css("left",a.pageX+30+"px")
        })
    },this))

});  

更改后我注意到的唯一错误是它尝试获取出现 404 错误的 url...
http://backend.deviantart.com/oembed?url=http%3A%2F%2Fnews.deviantart.com%2Farticle%2F143885%2F
...小错误，我将由您来消除那个错误;)。
哦，我拿出了计时器的东西，真的需要吗？当您单击图库时，您不会访问不同的网址吗？...因为如果您这样做，内容脚本将被重新注入（您可能需要为此添加更多匹配项，但实际上并没有看起来）。

Answer 2

从小书签转换为 Chrome 扩展程序几乎不需要任何工作（前提是小书签仅访问 DOM 元素 - 您的扩展程序似乎符合这一标准）。只需将 JavaScript 粘贴到扩展程序的 content_script.js 中即可。

但请注意，您的书签使用 jQuery。您还必须将其嵌入到您的内容脚本中。 请参阅此处了解如何这样做。

另一张纸条。您不需要利用某种错误来“突破”扩展；根据设计，Chrome 扩展程序可以访问页面的 DOM 元素，但不能访问 JavaScript 命名空间内的其他内容。换句话说，如果页面已将一些超级秘密变量加载到 var bob = 'My Secret!!!1' 中，您的扩展程序将无法访问 bob 并读取其值。另一方面，如果 bob 的值加载到 span 标记中，您的扩展程序可以找到该标记并读取它，因为它是 DOM 的一部分。

Answer 3

我认为您正在寻找的是消息传递：

http: //code.google.com/chrome/extensions/messaging.html

使用它，您可以将事件从 content_script 传递到后台脚本。在后台页面中，您可以使用所有 Chrome 扩展程序功能。