Chrome Extension CSDN Blog

序

写了这么多篇博客，访问量也上万了，可是没有一条评论。
这让我很难判断自己发的是否是有效信息。
既然我期待评论，那么首先我也就要评论别人。
于是决定了，每看一篇CSDN博客，都要评论。
当然了，说是这么说，可能会忘记，所以我决定开发一个Chrome扩展来解决这个问题。
当我打开不是我的博客的CSDN博客时，会提醒我评论。

文档

Chrome扩展当然也是用HTML+CSS+JavaScript写成了
参考资料:
https://developer.chrome.com/extensions/getstarted
这个是官方文档，看这个就好了
当然了，如果不想看英文，也可以看中文
http://open.chrome.360.cn/extension_dev/getstarted.html
当然了，这个中文自然是落后不少的了，反正现在Chrome已经对这个Sample报错了，以后肯定会一直报错下去吧
还是看官方文档吧

概述

一个Chrome Extension由一个manifest.json文件和若干HTML,CSS,JS文件组成
由于本篇文章并不想讲清楚Chrome Extension的开发的详细流程，我现在也不怎么会，只是简单的写一下做我这扩展的步骤
首先新建一个工作目录
然后新建manifest.json文件
内容如下

{
  "name": "CSDN",
  "version": "2.0",
  "permissions": [
    "tabs"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "CSDN"
  },
  "manifest_version": 2
}

这个清单文件限定了Permission，需要申请权限，和Android很像
这里用到的Tabs权限，并且用了一个background.js来控制逻辑
先，让扩展显示出来
进入
chrome://extensions/
勾选右上角的开发者模式
点左上角 加载已解压的扩展程序
选中工作目录
不出意外的话插件栏里面就有一个C的图标了
当然了，这个图标也是可以自定义的
具体怎么定义
看
https://developer.chrome.com/extensions/manifest

background.js

这个js文件就是要写逻辑了
先看代码

function isAlertUrl(url) {
  return url.includes('http://blog.csdn.net') && !url.includes('yyecust');
}
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
  if (changeInfo.url && isAlertUrl(changeInfo.url)) {
    alert('记得评论');
  }

isAlterUrl很好理解，关键是下面一行
看Tabs文档
https://developer.chrome.com/extensions/tabs
对于Tabs的Event，用到了onUpdated
https://developer.chrome.com/extensions/tabs#event-onUpdated
一开始用的是onCreated，有Bug，因为一个TabCreated并没有完全加载好

Note that the tab’s URL may not be set at the time this event fired, but you can listen to onUpdated events to be notified when a URL is set.
并且一个页面会Updated很多次，只监测Url变化的时候
这样就完成了

后记

感觉我这个代码肯定不是很好，要监听所有页面
不过目前先就这样吧，并且如果我养成了评论博客的习惯，说不定就不需要这个插件了，再者，评论博客确实也不是一件轻松的事情，这也可以迫使我多看官方文档，毕竟，官方文档写的还比大部分博客好的。