Question

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

我认为可以起作用的是为指定页面创建一个content_script的扩展（允许通过match通配符），以及< em>以某种方式让它做同样的事情，如果用户点击书签栏中的书签。

但是，我不知道如何做到这一点。

有一点需要注意的是我需要它来访问页面的全局范围，即突破扩展沙箱（这是可能的，并且has been confirmed可以通过设计实现在Chromium bug追踪器中。）

所以问题又是：，如何从content_script“加载书签”（换句话说，如何将书签转换为Google Chrome扩展）。我也可以在普通的javascript中使用它，如果它可以使用的话。

This是书签，以防有人想用它进行测试。这意味着在my.deviantart.com/messages/*使用（但您需要在收件箱中添加帐户和消息，以便将效果悬停在指向“偏差”的链接之上，并且会显示带有缩略图的工具提示）。

（修改： Here's an extension attempt，发表在答案的评论中）

Answer 1

如果您在清单的权限部分放置了网址，则可以通过内容脚本进行跨域调用...
http://code.google.com/chrome/extensions/xhr.html

看起来令人窒息的是您在请求网址中放入的回调，而不需要这样做，所以我把它拿出来了。
这是您的代码的工作版本.... 清单

{
  "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 ...的网址 http://backend.deviantart.com/oembed?url=http%3A%2F%2Fnews.deviantart.com%2Farticle%2F143885%2F
...小错误，我会让你摆脱那个;）哦，我拿出了计时器的东西，真的需要吗？当你点击一个画廊时，你不会去一个不同的网址吗？...因为如果你这样做，那么内容脚本将被重新注入（你可能需要为那个添加更多的匹配，看起来并不真实。）

Answer 2

我认为你要找的是Message Passing：

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

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

Answer 3

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

即可

但请注意，您的bookmarklet使用jQuery。您还必须将其嵌入到内容脚本中。 See here了解如何做到这一点。

另一个注意事项。你不需要利用某种bug来“突破”扩展;根据设计，Chrome扩展允许访问页面的DOM元素，但JavaScript命名空间内没有任何其他内容。换句话说，如果页面已将某些超级机密变量加载到var bob = 'My secret!!!1'，则您的扩展程序无法访问bob并读取其值。另一方面，如果将bob的值加载到span标记中，则您的扩展程序可以找到该标记并将其读取，因为它是DOM的一部分。

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

3 个答案: