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

【问题标题】：Auto-load bookmarklet when in webpage as a Google Chrome extension在网页中作为 Google Chrome 扩展程序自动加载书签
【发布时间】：2012-02-16 23:49:49
【问题描述】：

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

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

但是，我不知道怎么做。

需要注意的一点是，我需要它来访问页面的全局范围，即突破扩展沙箱（这是可能的，has been confirmed 在Chromium 错误跟踪器）。

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

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

（编辑： Here's an extension attempt，发布在答案的 cmets 中）

【问题讨论】：

标签： javascript google-chrome google-chrome-extension bookmarklet content-script

【解决方案1】：

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

似乎令人窒息的是您在请求 url 中放入的回调，而那是不需要的，所以我把它拿出来了。
这是您的代码的工作版本....
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"]
    }
  ]
}

内容脚本

$(".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
...小错误，我会让你摆脱那个错误；）。
哦，我把计时器的东西拿出来了，真的需要吗？当您单击图库时，您不会转到其他网址吗？...因为如果您这样做，那么内容脚本将被重新注入（您可能需要为此添加更多匹配项，但实际上并没有看到）。

【讨论】：

PS 酷脚本。当你发布它时，你能不能给我发个信息，告诉我它在哪里……如果这很酷的话，只需在我的 dA 帐户上给我发个 PM……paezz.deviantart.com 你是从哪里了解 dA api 的？我似乎没有找到任何好的信息。
我很高兴你喜欢这个脚本，我一定会在我得到它的工作后给你发私信！我也很难找到广告宣传不佳的 dA API，我什至尝试使用该网站的 js 进行破解（痛苦而徒劳无功），直到我找到它，它是 here。天啊，这是我的第一个书签、第一个greasemonkey 脚本和第一个谷歌浏览器扩展，我已经有一段时间没有看到 Javascript，我很高兴有人喜欢它！
现在在技术方面，是的，需要计时器，因为文件夹是通过 AJAX 加载的。我花了一段时间才弄清楚我需要那个。此外，它不会消耗太多 CPU（我想说几乎没有旧 CPU 的百分之一），因为半秒是很多时间，而且它只工作一次（它为此添加了一个属性）。我会给你的脚本一个旋转！希望它有效！
您想要的另一件事是在没有背景页面的情况下为您的内容脚本提供选项，好吧我今天想出了如何做到这一点.....forum.valorsolo.com/viewtopic.php?f=36&t=375 ..必须跳过几个箍，但它的工作原理;）
已发布。我来自使用框架被认为是非常糟糕的做法的时代，但我一直在阅读为什么 iframe 是可用的并且这些天非常酷。在和他们一起玩的时候，我突然想到这可能会奏效。可惜，我们必须跳过箍才能做到这一点，真的希望扩展程序有一个设置 api，允许同步设置（存储在谷歌云中）并从内容脚本访问（没有背景页面）。

【解决方案2】：

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

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

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

【讨论】：

There is almost no work required in converting from a bookmarklet to a Chrome extension 我有一个小书签，从大约 5 到 6 小时前就可以正常工作了，无论我尝试什么，我都无法对其进行扩展。 Check it out if you want。它给出的当前错误基本上是 jQuery 用来加载 JSONP（填充 JSON）的回调函数在被调用时找不到（我无法理解它，如果我能以某种方式制作，我就放弃了我的工作小书签自动加载）。我真的只是想要任何能让它工作的黑客，即使是丑陋的。
您的扩展程序中是否包含jquery.js？如果您可以发布实际的错误消息，那将很有帮助。
是的，我做到了。 here's what it looks like。很快，谷歌浏览器的标志就会变成一个小丑脸。
@CamiloMartin 我加载了您的扩展程序，但没有收到任何错误。代码也在触发。我无法确认该行为是您所期望的，因为我不知道它的作用，但我没有收到任何控制台错误。运行最新的 Chrome 17。
我卸载了扩展并重新加载它，它给了我这些错误。我不知道您是如何运行它的（我认为了解您如何在预期页面之外对其进行测试很重要），但基本上它无法触发加载 JSONP 触发的 jQuery 创建的随机命名回调函数。你是如何/在哪里尝试的？触发了什么代码？

【解决方案3】：

我想你要找的是Message Passing:

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

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

【讨论】：

我不明白这是怎么应用的，你能解释一下吗？我没有背景脚本，如果手动单击作为小书签，我的工作原理。我只需要通过代码“点击书签”。
没关系，但如果你有什么想法，请告诉我。