斗鱼扩展初识Chrome扩展(一)
看斗鱼有些时间了,也写了不少辅助的js,但是昨天不小心把硬盘分区表搞没了,自己写了好久的代码不见了,DiskGenius 也没恢复成功,所以要重写一次,大家要引以为鉴,常备份代码,github是个不错的选择。
先通过一个简单的程序, 来认识下 Chrome 扩展,通过最简单的2个文件,就能组成一个Chrome扩展(图标的那个可以不要)
1. manifest.json 主要文件,一些权限说明都在此注册
content_scripts.js 主要执行文件(这里我们只要打一行文字)
chrome://extensions/ 打开,开发者模式,然后 将DouyuRoom 文件夹 拖入 这个页面
我们打开一个 斗鱼房间, 然后就看到 一行我们设置的文字被打印出来了。
这时,我们要把 代码 同步一以github上去,先创建一个名为DouyuRoom的仓库。
记下 仓库地址 https://github.com/likehc/DouyuRoom.git
用”Ctrl+Shift+p”打开命令窗口,输入”Git:init”初始化git环境。注意工程目录,别错了
在Git directory 里敲回车,确定当前目录
"Git:add" 来添加新增和修改的文件(这里的文件都是第一次修改上传,所以我选了all)
“Git:commit” 在弹出的窗口处写入确认信息,直接关闭窗口就行,直接触发commit
关联地址 远程仓库地址 ,Sublime 插件上的,我不知道怎么关联,所以用了这个方法。
然后 就是push.
回到Sublime ,我们就可以 修改完文件,add..选择修改的文件,commit,然后pull 与push 了。
manifest.json
{
"manifest_version": 2,
"name": "DouyuRoom",
"description": "斗鱼房间的一些优化",
"version": "1.0.0",
"icons":{
"16":"ico/icon.png", //扩展在浏览器右上图标
"48":"ico/icon.png" //扩展程序管理里面的图标
},
"content_scripts":[{
"js": ["js/content_scripts.js"], //要注入的js
"matches": ["https://www.douyu.com/*"], //满足这里的页面方能注入js
"run_at": "document_idle",
"all_frames":true
}]
}
content_scripts.js
console.log("I'm form %cDouyuRoom","color:red");
斗鱼扩展初识Chrome扩展(一)的更多相关文章
- 编写Chrome扩展程序
Chrome的扩展程序很多,也很容易入门,可以来简单实现一下 看看,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件 其他文件等 可以看 ...
- 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...
- 【转】编写Chrome扩展程序
Chrome的扩展程序很多,也很容易入门,可以来简单实现一下 看看,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件 其他文件等 可以看 ...
- 如何用原生js开发一个Chrome扩展程序
原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...
- 手把手教你开发chrome扩展
转载:http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html 手把手教你开发chrome扩展一:开发Chrome Extenst ...
- 认识Chrome扩展插件
1.前言 现如今的时代,绝大多数人都要跟浏览器打交道的,说到浏览器那肯定是Chrome浏览器一家独大,具体数据请看 知名流量监测机构 Statcounter 公布了 7 月份全球桌面浏览器市场份额,主 ...
- Chrome浏览器扩展开发系列之一:初识Google Chrome扩展
1. Google Chrome扩展简介 Google Chrome扩展是一种软件,以增强Chrome浏览器的功能. Google Chrome扩展使用HTML.JavaScript.CS ...
- 清除页面广告?身为前端,自己做一款简易的chrome扩展吧
大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插 ...
- chrome扩展程序开发
首先,明确两个概念的区别:chrome扩展程序和Web Apps.具体参考:http://www.chromi.org/archives/10106 本文只讨论chrome扩展程序. 最好的开发教程莫 ...
随机推荐
- 使用union来遍历结构体中的成员
前几天和实验室的同学讨论问题的时候发现他使用的一段数据校验的代码自己以前没有接触过,今天有空就把它整理了一下. #include <stdio.h> #include <stdlib ...
- centos6 搭建IPSEC
http://www.maxwhale.com/how-to-install-l2tp-vpn-on-centos/ http://blog.earth-works.com/2013/02/22/ho ...
- 《精通Spring4.X企业应用开发实战》读后感第五章(FactoryBean)
- python远程登录Paramiko模块的安装
最近做云平台的项目,需要使用python来管理所有的主机,我选择了paramiko.它跨平台的,linux和window都可以使用,pssh只支持linux. 1:安装gcc和python-devel ...
- 23. CTF综合靶机渗透(十六)
靶机说明: VM Name: JIS-CTF : VulnUpload Difficulty: Beginner Description: There are five flags on this m ...
- Makefiles
A tutorial by example Compiling your source code files can be tedious, specially when you want to in ...
- 微信小程序自学第二课:app及页面的生命周期、使用setData绑定数据
一.App声明周期 1.App() app.js中的App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. 示例代码: App({ onLaunch: fun ...
- Intel MPI 配置与基本使用
安装 Document 系统配置/含NFS 编译环境 设置 加载 mpivars.[c]sh 脚本. 创建文本文件 mpd.hosts ,其中保存有集群的节点列表,每行一个名字 (只针对开发者) 确保 ...
- 在Linux系统下远程连接oracle的防火墙设置
在Linux系统要远程连接Oracle的防火墙设置方法: 打开5801至5810 端口用于vnc iptables -I INPUT -p tcp --dport 5801:5810 -j ACCEP ...
- 帝都Day4(1)——还是dp
其实是day4 一.洛谷P1018 乘积最大 f[i][j]表示前i个数 切成j块 用f[i][j]而不用f[i][j][k](i到j切成k块)呢? Luogu1043 前缀和(好算一段里的数的和)+ ...