知音漫客-Chrome插件

昨天我上某漫画网站，看到斗破苍穹有一集更新，点开后出现提示：

为维护版权方权益或违反国家法律法规本站不提供阅读，请点击这里 进入版权方平台阅读

点击后来到了知音漫客网站，需要付费购买了，一期是3元。

不购买时，会出现遮挡层和一个提示你购买的窗口，此时是无法点击下一页的，但没有屏蔽键盘事件，通过键盘的左右箭头还是可以翻页的，通过这个bug，我们可以免费看漫画了。

两种方法：
– js删除遮挡层的dom节点

var bg_child=document.getElementById("layui-layer-shade1");
bg_child.parentNode.removeChild(bg_child);
var w_child=document.getElementById('layui-layer1');
w_child.parentNode.removeChild(w_child);

• css隐藏遮挡层的dom节点

div#layui-layer-shade1 {
display: none;
}

div#layui-layer1 {
display: none;
}

在控制台用运行删除dom的代码，看完了最新的一章。别人用这个方法，也不一定会操作，所以，我决定开发一个chrome插件，并不难，如果有一定的前端基础，开发chrmoe插件分分钟的事。

一个 Chrome 扩展，其实就是一个配置文件 manifest.json 和一系列 HTML、CSS、JS、图片文件的集合，而文件之间的组织，跟普通的web开发一样。

首先说manifest.json文件，这个文件是插件的描述，必不可少，必须的字段只有：name和version，其他字段根据自己的程序选择。

{
"manifest_version": 2,
// manifest版本，指定如何执行代码，由google官方发布，目前版本为2
"name": "知音漫客",
// 插件名称
"description": "去除 知音漫客 遮挡层",
// 插件描述
"version": "1.0",
// 插件版本号

"icons": {
// 显示在菜单栏的指示图标，大小范围16-128像素，可以指定多个不同像素图标
"48": "icon.ico"
},

"options_page": "options.html",
// 插件图标右键，点击弹出菜单的选项会跳到options.html页面

"chrome_url_overrides": {
// "newtab": "tab.html"
// 自定义页面替换chrome默认页面，如新标签页（newtab）、书签页面（bookmarks）和历史记录（history）。
},

"browser_action": {
// 工具栏图标

"default_icon": "icon.ico",
// 扩展log
"default_title": "知音漫客",
// 悬浮提示文字
"default_popup": "index.html"
// 点击后弹出index.html

},

"page_ctions": {
// 地址栏图标，不是显示在地址栏的右边，而是显示在地址内部右方，比如说收藏夹那个五角星
},

// 下面两个我会在后面详细介绍

"background": {
// 扩展的后台页面
// "scripts": ["background.js"]
},

"content_scripts": [
{
//注入页面的脚本和css
"matches": ["*://www.zymk.cn/*"],
"css": ["hide.css"]
}
]

}

新手容易在content_scripts和background搞糊涂，首先要明确，你的扩展程序和浏览器页面是在不同的进程中运行的。一旦插件被启用，chrome会开辟一个独立的java运行环境给你的插件使用，background是你插件的后台进程，而content_scripts是注入到网页中的脚本，可以干预页面的内容。它们之间是不能直接访问对方变量的。

这个插件并不需要前台的展示界面，只要把脚本注入到页面中修改网页，所以用content_scripts

"content_scripts": [
{
//注入页面的脚本和css
"matches": ["*://www.zymk.cn/*"],
//只在知音漫客网站运行
// "js": ["delete.js"]
//注入js文件，注入的js与页面中js的变量同样不互通，不用担心与原来js冲突，只是共享同一个dom
// "run_at": "document_end"
// 指定content_scripts注入的时机
"css": ["hide.css"]
//向匹配页面中注入的CSS文件。这些文件将在页面的DOM树创建和显示之前

}
]

如果用js方式，需要指定注入时机"run_at": "document_end"，文件将在创建完DOM之后，但还没有加载类似于图片或frame等的子资源前立刻注入。两种方法都可以，这里我用性能优的css方式。

编写完相应的html，css，js就完成一个chrome插件了。

除以上，再说明这些。

如何查看其它插件的源码

访问chrome://version 找到Chrome安装的本机目录后，进入extension文件夹，所有插件的数据都在这。

如何打包chrome扩展

地址栏输入：chrome://extensions/，勾选开发者选项，点击打包扩招查询，它会在你插件文件夹同级目录生成成crx压缩文件和pem秘钥文件，crx文件可以直接拖到扩展程序页面安装

不要把js文件内嵌到html

出于安全考虑，内嵌的js代码是不能运行的，必须通过引用的方式。

调试

原web的页面和content_scripts，可以直接打开控制台，Elements是用来做DOM分析，Sources的Content scripts做js调试，在前面打上断点，执行到断点处停住，鼠标放上去可以观察变量
调试Background，打开 chrome://extensions ，点击检查视图后面的背景图。
调试Popup，工具栏右侧右击插件图标，点击审查弹出内容。

开发文档及源码

360翻译的官方文档：http://open.chrome.360.cn/extension_dev/overview.html
官方文档：https://developer.chrome.com/extensions
源码下载：https://github.com/zhongsheng23/manhua

最后，如果有了一定经济能力，如果不差两三块钱，请大家支持正版。