看斗鱼有些时间了,也写了不少辅助的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扩展(一)的更多相关文章

  1. 编写Chrome扩展程序

    Chrome的扩展程序很多,也很容易入门,可以来简单实现一下 看看,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件 其他文件等 可以看 ...

  2. 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单   手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...

  3. 【转】编写Chrome扩展程序

    Chrome的扩展程序很多,也很容易入门,可以来简单实现一下 看看,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件 其他文件等 可以看 ...

  4. 如何用原生js开发一个Chrome扩展程序

    原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...

  5. 手把手教你开发chrome扩展

    转载:http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html 手把手教你开发chrome扩展一:开发Chrome Extenst ...

  6. 认识Chrome扩展插件

    1.前言 现如今的时代,绝大多数人都要跟浏览器打交道的,说到浏览器那肯定是Chrome浏览器一家独大,具体数据请看 知名流量监测机构 Statcounter 公布了 7 月份全球桌面浏览器市场份额,主 ...

  7. Chrome浏览器扩展开发系列之一:初识Google Chrome扩展

    1.       Google Chrome扩展简介 Google Chrome扩展是一种软件,以增强Chrome浏览器的功能. Google Chrome扩展使用HTML.JavaScript.CS ...

  8. 清除页面广告?身为前端,自己做一款简易的chrome扩展吧

    大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插 ...

  9. chrome扩展程序开发

    首先,明确两个概念的区别:chrome扩展程序和Web Apps.具体参考:http://www.chromi.org/archives/10106 本文只讨论chrome扩展程序. 最好的开发教程莫 ...

随机推荐

  1. navicat自动备份

    http://blog.csdn.net/eastmount/article/details/70239244

  2. go 语言 基础 类型(1)

    变量 使用关键字 var定义变量,自动初始化为0值.如果提供初始化值,可省略变量类型,由编译器自动推断. 在函数内部可以使用 := 方式定义变量 func main() { x := 123 } 可一 ...

  3. Java探索之旅(11)——抽象类与接口

    1.Java数据类型       ❶不可变类,是指当创建了这个类的实例后,就不允许修改它的属性值. 它包括:         Primitive变量:boolean,byte, char, doubl ...

  4. LoadRunner 参数模拟——快速得到并发用户的进场规则

    LoadRunner 并发时,一般需要进入参数化 用户名或者相关的字段数据,用以满足在并发时无限的接近真实的使用场景: 但当你在设置好参数化的读取规则后,在执行并发场景时,用户并发加载顺序是否确实如你 ...

  5. SpringSecurity02 表单登录、SpringSecurity配置类

    1 功能需求 springSecuriy默认的登录窗口是一个弹出窗口,而且会默认对所有的请求都进行拦截:要求更改登录页面(使用表单登录).排除掉一些请求的拦截 2 编写一个springSecurity ...

  6. 发起http(s)请求

    发起http(s)请求我这里主要列举了3种方式: 一.命令行的方式 二.通过工具 三.通过代码 一.命令行的方式 1. curl  curl官网: https://curl.haxx.se/downl ...

  7. HTML基础:

    HTML是英文HyperText Markup Language的缩写,即超级文本标记语言,是用于描述网页文档的一种标记语言.HTMl是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言.HTM ...

  8. 15、TSA数据上传(https://www.ncbi.nlm.nih.gov/genbank/tsaguide/#SP)

    https://www.ncbi.nlm.nih.gov/genbank/tsa/ https://www.ncbi.nlm.nih.gov/genbank/tsaguide              ...

  9. 基于FPGA具有容错能理的异步串口程序设计

    首先,问题源于一个项目.本来是一个很简单的多个串口收发FIFO存取数据的小程序,通过电脑验证也可用,而下位机板子之间通信就出现了丢数问题. 经过分析原因如下: 我的串口收模块是基于特权同学的开发板程序 ...

  10. c#事件1

    Private void button_clicked( object sender ,RouteEventArgs e) sender :引发事件的对象 源 e :      路由事件,提供可能重要 ...