谷歌浏览器扩展程序之填充页面

最新推荐文章于 2024-05-27 18:18:43 发布

转载最新推荐文章于 2024-05-27 18:18:43 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/so-easy/p/9782901.html

文章标签：

#json #javascript #git #ViewUI

本文详细介绍如何从零开始创建一个Google浏览器扩展程序，包括文件结构、manifest.json配置、使用myscript.js进行网页元素操作，以及引入jQuery库的方法。通过具体实例展示了如何修改网页上的输入框和选择框的值。

记录新建的第一个Google浏览器扩展程序

新建任意文件夹，并新建文件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
    }
  ]
}

//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

转载于:https://www.cnblogs.com/so-easy/p/9782901.html