diigo_为Diigo创建Chrome扩展程序，第1部分

diigo

这些天，书签服务是一角钱。 当您的职业和兴趣爱好要求您保存数百个链接时，事情就会变得一团糟。 我最终决定使用Diigo，因为它既支持列表又支持标签-您可以将多个标签添加到每个书签，也可以将每个书签添加到列表。 但是访问这些书签很麻烦–我首先必须在一个新选项卡中打开Diigo库，然后在我之前的列表中单击书签。 如果我的图书馆很复杂且嵌套很深，那就更麻烦了–我需要通过单击左侧的过滤器来进一步过滤搜索，而且我已经花了更多的时间尝试进入加书签的网站。

规划

在本系列中，我们将创建一个Google Chrome扩展程序，该扩展程序与Diigo API挂钩，检索在那里保存的书签，并将它们同步到Chrome书签栏上的文件夹中。 该文件夹将具有多个级别：

1. 根级别。 子文件夹“ Tags”以及所有用户标签为bbs-root的书签都将在此处。
2. 标签级别。 对于用户在Diigo库中具有的每个标签，“标签”子文件夹将包含一个文件夹。 输入所述文件夹将列出所有具有给定标签的帖子。

不幸的是，由于Diigo的API尚不完善，因此如果将标签留空，则无法删除标签，如果在Chrome中将其删除，也无法从Diigo中删除书签。 如果显示此API，我将其留给其他人编写后续文章。 同样，Diigo API目前不支持列表。 一旦他们添加了此功能，就应该足够简单直接使用“列表”子文件夹升级此扩展。

请务必注意，Google的书签服务非常垄断。 Chrome具有内置的最大写入限制 ，这意味着您每小时通过chrome.bookmarks API进行的写入（创建，更新和删除）最多不能超过100次。 这意味着，如果某人在Diigo中拥有超过100个标签/列表/书签，那么他们的浏览器将需要花费几个小时才能将其全部获取，并最终减少写入次数（从那时起，仅更新，创建和删除操作应该少得多）共同）。 我们还将使用诸如let关键字之类JavaScript 1.7结构，因此您应该进入chrome://flags并启用“实验性JavaScript”。 可以不let完成吗？ 绝对。 但我坚信，来自新技术，只是因为它不是到处但避而远之是有害的开发商和一般的网络。 JS 1.7是7年前问世的，这在互联网时代已经有3个世纪了。 除了let ，我们还将使用“严格模式” ，因为没有let不能使用let 。

请注意，这意味着未启用实验性JS的用户将无法安装和使用此扩展程序，至少直到在Chrome中默认启用JS 1.7支持为止。

自举

首先，让我们创建一个文件夹，其中保存扩展程序的源代码。 创建一个这样的文件夹结构，并将JS和JSON文件留空。

/
    icons/
    background.js
    manifest.json

接下来需要填写的manifest.json文件。

{
    "name": "Diigo Bookmark Bar Sync",
    "description": "Sync Diigo Bookmarks to Chrome",
    "version": "1.0.0.0",
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "bookmarks", "https://secure.diigo.com/api/v2/"
    ],
    "browser_action": {
        "default_icon": {
            "19": "icons/19.png",
            "38": "icons/38.png"
        },
        "default_title": "Diigo BBS"
    },
    "icons": {
        "16": "icons/16.png",
        "48": "icons/48.png",
        "128": "icons/128.png"
    },
    "manifest_version": 2
}

如果您已经按照之前在Sitepoint上的Chrome扩展教程进行了学习 ，则应该熟悉所有键及其值。

您可能不熟悉以下三种新颖性：我们使用的是JS后台页面而不是HTML（无论哪种方式都无关紧要-JS的速度明显更快），我们正在请求“书签”权限，以要求Chrome浏览器允许我们对其进行编辑，然后请求访问https://secure.diigo.com/api/v2/权限，这可以帮助我们使用跨源ajax ，换句话说，就是让我们在Diigo上进行Ajax调用而不会引发安全标志。

我们还使用了browser_action ，这意味着我们将始终在多功能栏上添加一个持久图标NEXT，而不是在特定页面上时在其内部，就像页面操作一样。

为manifest.json文件中提到的扩展名制作一些图标，然后将其添加到icons文件夹，或者直接下载我的图标并将其放在此处。

此时，我们可以通过将扩展程序加载到扩展程序标签（chrome：// extensions）中来对其进行测试。 确保选中“开发人员模式”，然后单击“加载解压的扩展程序”，然后将Chrome指向放置文件的文件夹。 如果一切顺利，扩展程序的图标应显示在多功能条右侧的顶部栏中，如果将鼠标悬停在扩展条上，则应该会弹出“ Diigo BBS”。

Diigo API

要访问Diigo的API，您需要注册一个API密钥 。 这将为您提供一串随机字符，您需要将其与每个Diigo API请求一起发送以识别自己（实际上，是为了识别您的应用程序-每个应用程序将具有不同的API密钥）。

Diigo的API严重欠发达，但是RESTful意味着我们每次都调用相同的URL来作用于相同的对象（即Bookmarks），但是更改了请求类型（获取，POST更新和插入，DELETE删除书签）–尚未实现）。 我们很快将对此进行更深入的说明。

从本质上讲，与API进行通信就像将请求发送到URL一样简单，该URL填充了所需的参数。 如果我们假设有一个名为“ Joel”的用户，要获取Joel的10个书签，我们将使用https://secure.diigo.com/api/v2/bookmarks?key=your_api_key&user=joel&count=100&filter=all

如果出现问题，对此请求的响应将是错误代码，或者是JSON对象。 如果Joel没有书签，则此JSON对象将不包含任何内容，或者将包含与这些书签中的信息相对应的数据块，就像API文档中的示例所示：

[
  {
    "title":"Diigo API Help",
    "url":"http://www.diigo.com/help/api.html",
    "user":"foo",
    "desc":"",
    "tags":"test,diigo,help",
    "shared":"yes",
    "created_at":"2008/04/30 06:28:54 +0800",
    "updated_at":"2008/04/30 06:28:54 +0800",
    "comments":[],
    "annotations":[]
  },
  {
    "title":"Google Search",
    "url":"http://www.google.com",
    "user":"bar",
    "desc":"",
    "tags":"test,search",
    "shared":"yes",
    "created_at":"2008/04/30 06:28:54 +0800",
    "updated_at":"2008/04/30 06:28:54 +0800",
    "comments":[],
    "annotations":[]
  }
]

接收到它后，就很容易从该JSON数据中提取我们需要的所有内容，但是我们将在一分钟内完成。

API文档说

身份验证使用HTTP基本身份验证-一种标准身份验证方法，在授权请求标头中包含base64编码的用户名和密码。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

..但既没有解释也没有演示。

意思是：当您在浏览器中访问API的实际URL时，请尝试单击this ，提示您输入用户名和密码。

如果您无法输入正确的凭据，则会收到403响应，这意味着您没有足够的访问权限。

如果您确实具有适当的凭据，则可以通过两种方式访问​​URL：打Kong并提交表单，或将其包含在URL中，例如： https://myusername:mypassword@secure.diigo.com/api/v2/bookmarks?key=your_api_key&user=joel&count=100&filter=all ，其中myusername和mypassword应该分别替换为您的信息。 如果您注册了API密钥并拥有有效的Diigo帐户，您甚至可以立即在浏览器中进行测试。 您应该获得一个空数组（[]）或书签列表（或在URL的user参数中定义的用户的公共书签）。

那么base64编码是什么意思？ 这意味着我们需要通过其他过滤器来运行用户名和密码，只是为了解决密码中所有奇怪的字符。 字符串myuser:mypass将因此转换为bXl1c2VyOm15cGFzcw== （ 在此处进行测试）。

那么我们如何将所有这些放在一起？

编码和发送

首先，我们需要一种对字符串进行base64编码的方法。 鉴于JS没有内置此功能，我们可以使用Webtoolkit中的代码。 将该代码粘贴到您的background.js文件中。 如果需要，甚至可以缩小它以使其更紧凑。

接下来，我们需要告诉我们要授权的API URL。 这是通过Authorize标头完成的，当将本机XHR对象用于Ajax时，我们可以使用xml.setRequestHeader('Authorization', auth); 方法，其中auth是包含授权数据的字符串。

让我们创建一个生成此身份验证字符串的通用函数。

function make_basic_auth(user, password) {
  var tok = user + ':' + password;
  var hash = Base64.encode(tok);
  return "Basic " + hash;
}

如您所见，返回的字符串将是“ Basic” +从user + pass字符串作为Base64值计算得出的值。 为了获得对我们将其发送到的URL的访问权限，Authorization标头需要此字符串。 从本质上讲，它与您通过浏览器访问URL时手动输入用户名和密码相同。

您可能想知道–我们是否也不能像在浏览器中那样仅将user：pass添加到URL的开头，而只是忽略Base64业务？ 是的，但是您并没有考虑其他字符，并且可能会因无效请求而遇到一些严重的麻烦–例如，“ @”符号表示服务器地址的开头，将其输入密码中将会使我们陷入困境。努力。

最后，让我们向API发出XHR请求。

var auth = make_basic_auth('user','pass');
var url = 'https://secure.diigo.com/api/v2/bookmarks?key=your_api_key&user=desireduser&count=100&filter=all';

xml = new XMLHttpRequest();
xml.open('GET', url);
xml.setRequestHeader('Authorization', auth);
xml.send();

xml.onreadystatechange = function() {
    if (xml.readyState === 4) {
        if (xml.status === 200) {
            console.log(xml.responseText);
        } else {
            console.error("Something went wrong!");
        }
    }
};

当然，用您的值替换“ user”，“ pass”，“ your_api_key”和“ desireduser”。

如果现在使用打开的后台页面重新加载扩展程序（在扩展程序屏幕中单击_generated_background_page.html以查看扩展程序的背景页面和控制台错误报告（如果有）），我们应该会看到一切运行正常–即应该有后台页面的控制台中没有错误，并且应该有“ []”（空数组）或类似下图的内容：

第一部分的结论

在这一部分中，我们已经引导了我们的扩展，解释，实现和演示了Diigo API调用。 在第2部分中，我们将编写大部分扩展。

翻译自: https://www.sitepoint.com/creating-chrome-extension-diigo-part-1/

diigo