人生所有经过的路,
都是必经之路

知音漫客-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

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

本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可 »钟声博客 » 知音漫客-Chrome插件

相关推荐

  • 加v认证-wordpress插件
  • cms指纹识别-chrome插件
  • 驾校一行js,完成的chrome插件
  • 渗透xx校友网
  • 百度 VS 谷歌

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    发布几个小时,我想看看搜索引擎有没有收录,百度谷歌出来的是竟然别人的采集站

    钟声 1年前 (2017-07-22)回复
  2. #2

    刚刚发现Adblock Plus(广告屏蔽插件)有元素拦截功能,可以用它去除遮挡层

    钟声 1年前 (2017-08-03)回复

我的简书友情链接