谷歌浏览器扩展程序之探索,包含博客园markdown编辑器插件

从入门做的一个自动填充页面的扩展,到做了一个博客园markdown编辑器插件的扩展,当作笔记了。

chrome扩展程序--自动化操作页面

包含选项页、保存信息到缓存、扩展向页面发送数据

新建

新建任意文件夹,并新建文件manifest.json和myscript.js(UTF-8编码),内容如下

manifest.json

{
  "name": "**",                                                   扩展程序的名字
  "manifest_version": 2,                             
  "version": "1.0",                                                     版本号
  "description": "**",
  "browser_action": {
    "default_icon": "zz.png"                                          19*19图标(网上大神说的)
  },
  "content_scripts": [{
      "matches": ["https://**/**/*", "https://**/**/*"],              在哪些网址下运行
      "js": ["myscript.js"],                                         要执行的js
      "css": ["mystyle.css"]                                       要应用的样式
    }]
}

myscript.js

//myscript.js
 $("#form1 tr td:nth-child(13) input").not("[readonly]").each(function () {this.value = "8.0"}); //改变13列的input的指为8.0
 $("#form1 tr td:nth-child(8) select").each(function () {this.value = "9"});//改变8列的select的值为9

因为myscript.js用到了jquery,所以在manifest.json中引入,并下载对应jquery到新建的文件夹

{
    "content_scripts": [{
      "matches": ["https://**/**/*", "https://**/**/*"],
      "js": ["jquery-3.3.1.min.js", "myscript.js"
    ]}
}

添加到浏览器、打包发布

添加到谷歌浏览器:谷歌浏览器---->扩展程序,添加已解压的扩展程序(即新建的文件夹),访问指定页面即加载扩展程序

打包扩展程序:在上一步添加的页面,有一个打包扩展程序选项,点击,打包扩展程序,发布

注:感谢github上小茗同学的项目https://github.com/sxei/chrome-plugin-demo.git

posted @ 2018-10-13 14:50  少年小白  阅读(425)  评论(0编辑  收藏  举报