chrome拓展程序编写、打包（User Script）

目录

什么是User Script？

chrome扩展程序

一个脚本文件的扩展程序的编写

多个脚本文件的扩展程序的编写

修改计算机策略，允许chrome运行编写的扩展程序

---

什么是User Script？

User scripts或者称userscripts，是用来在客户端（浏览器或者代理服务器）对特定的网页进行修改的脚本，一般用来改变页面的外观或者增加修改功能。User scripts目前常见的是用javascript书写的脚本。

更多了解：https://blog.csdn.net/iteye_13894/article/details/82536951

chrome扩展程序

chrome扩展程序是一个孤独的个体，

它不能使用由其扩展页面定义的变量或函数 。

不能使用由网页或其他内容脚本定义的变量或函数。

也就是说，就算你要使用扩展程序的网页引用了jquery.js，但是你的扩展程序是无法使用到的；但是你可以为你的扩展程序引入属于它的jquery.js。

一个脚本文件的扩展程序的编写

如果只有一个脚本，用javascript书写完之后，文件只需以“.user.js”后缀结尾即可，就可以直接丢进chrome浏览器的拓展程序里。

路径：chrome浏览器-》三个点-》更多工具-》扩展程序

也可以：在chrome地址栏中输入：chrome://extensions/ 直接打开扩展程序的管理界面

然后把你的脚本拖进去就可以了（拖进去之后也不能直接运行，后面会讲解决方法）。

多个脚本文件的扩展程序的编写

如果你的脚本文件不止一个，而且它们之间还存在调用关系，此时，你就要用到打包功能。

首先需要编写一个配置文件manifest.json，用来配置扩展程序的基本信息：程序名、版本、引用的js文件。

然后将它与js文件放置在同一个文件夹下，就可以打包了。

详细的配置见此文档：https://open.chrome.360.cn/extension_dev/manifest.html

{
   "name":"OA自动打卡",
   "version":"1.0",//版本号
   "manifest_version":1,//版本
   "description":"这里是描述",
   "browser_action":{},
   "content_scripts":[{//需要执行的脚本
      "matches":["https://127.0.0.1/*"],//url符合这个规则，就执行下面的脚本
      "js":[//待执行的脚本列表
         "jquery.js",
         "oa-auto-clock-in.user.js"
      ]
   }]
}

content_scripts：列表的顺序很重要，如果您的脚本使用jQuery，然后jquery.js应该在它之前。

打包也是在chrome浏览器的扩展程序里，点击右侧“开发者模式”，点击“打包扩展程序”，然后导入刚才的文件夹，最后在文件夹的同个父目录下生成两个文件，一个是.crx结尾的文件，就是打包之后的扩展程序；另一个是.pem结尾的文件，是私钥文件；后面更新扩展程序代码的时候，需要传入私钥文件。（丢失了问题也不大，就当做打包新的扩展程序）。

.crx扩展程序的使用和.user.js一样，也是直接拖进chrome的扩展程序。

修改计算机策略，允许chrome运行编写的扩展程序

上面把扩展程序编写完成之后，直接拖进chrome的扩展程序，你会发现它无法开启，运行不了，提示“该扩展程序未列在 Chrome 网上应用店中，并可能是在您不知情的情况下添加的。”。

然鹅，事情总有解决方法的，这里就涉及到修改计算机的策略了。

我们在下一篇专门讲如何处理：https://blog.csdn.net/XIADANXIN/article/details/119008665