如何制作chrome插件，可以用jquery修改已知网页DOM

第一步：新建一个文件夹，创建一个文件manifest.json

文件内容：

{

  "manifest_version": 2,

  "name": "用jquery搞事情",

  "description": "使用jquery *** 作dom",

  "version": "1.0",

  "icons": {

    "128" : "icon.png"

  },

  "permissions": [

    "tabs", "http://*/*","https://*/*"

  ],

  "content_scripts": [

    {"js":["jquery-1.10.2.js","do-something.js"],"matches":[

"https://www.baidu.com/"

]}

  ]

}

js：你要引入的js文件，这里引入jquery和你要搞事情的js文件（所有的文件都要放到这个文件夹里）

metches：匹配的网站,可以加*模糊匹配，也可以写多个匹配网站

do-something.js内容：（只是举个例子，你可以随便写）

console.log("脚本加载成功！！")

//下面可以尽情的搞事情了。

$("#su").val("百度两下")

第二步：打开chrome的扩展程序界面，选择开发者模式，加载已解压的扩展程序，然后选择你的文件夹就可以了。

看一下效果：

搞定。

使用的就是 window.open(URL,name,features,replace)open()方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。提几个重要的方面,至于该方法的详细参数使用你自己摆渡第一点,新窗口与旧窗口的刷新 //在代码某一处 //开启了一个新窗口 window.open(URL, 'newWidow', 参数) //在代码另一处 window.open(URL, 'newWidow', 参数)//这时候因为已经存在了一个 name为newWidow的窗口, 所以不会再打开新窗口,而是在当前newWindow中刷新第二点,控制新网页以标签页还是新窗口的形式打开//以标签页的形式打开window.open(URL, 'newWidow')//以新窗口的形式打开window.open(URL, 'newWidow', 参数)//从代码观察可知, 对于支持多标签的浏览器, open方法中设定窗口参数与否, 决定了是以标签页打开,还是以新窗口打开

1、在元素标签上右键审查元素。

2、蓝色部分与红色箭头所指是选中的元素代码。

3、点击箭头所指的部位,打开控制台,如果js 异常会在这里显示相关信息。

4、按照箭头的顺序点击,在代码59行,打上断点。

5、点击箭头所指的位置,刷新页面。

6、js运行到断点的位置会暂停。

7、点击右侧箭头所指的位置,单步执行js代码。

8、鼠标放在变量上,可以查看变量的相关信息。

---