开始学习开发Chrome扩展插件

最新推荐文章于 2024-09-20 19:44:12 发布

Dino Fong

最新推荐文章于 2024-09-20 19:44:12 发布

阅读量208

点赞数

分类专栏：一起玩 scripting language 文章标签： chrome 学习 javascript

本文链接：https://blog.csdn.net/DinoFong/article/details/105514069

版权

一起玩同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

scripting language

3 篇文章 0 订阅

订阅专栏

本文介绍了如何创建一个简单的Chrome扩展程序，包括编写manifest.json配置文件，创建前端页面popup.html和对应的JavaScript脚本popup.js，以及设置扩展程序图标，并讲解了在Chrome浏览器中安装和调试扩展的方法，最后提到了发布到ChromeWebStore的流程。

摘要由CSDN通过智能技术生成

以下是一个简单的Chrome扩展程序开发的例子：

创建一个新的文件夹并命名为"Chrome-Extension"，并添加manifest.json文件，这个叫格式清单文件，在文件中添加扩展程序的基本配置信息：

{
   "manifest_version": 2,
   "name": "My Extension",
   "description": "A simple Chrome extension",
   "version": "1.0",
   "icons": {
      "128": "icon128.png"
   },
   "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
   }
}

该配置文件指定扩展程序的名称、描述、版本、图标和浏览器操作等信息。
具体还有其他配置内容请参阅官方文档 https://developer.chrome.com/extensions/manifest

创建popup.html文件作为扩展程序的前台页面，包含一个简单的按钮：

<!DOCTYPE html>
<html>
   <head>
      <title>My Extension</title>
      <script src="popup.js"></script>
   </head>
   <body>
      <button id="myBtn">Click me!</button>
   </body>
</html>

该页面包含一个按钮和一个JavaScript文件。

创建popup.js文件，定义按钮的点击事件：

document.getElementById("myBtn").addEventListener("click", function() {
   alert("Hello World!");
});

该文件定义一个点击事件，当用户点击按钮时，将弹出一个欢迎提示框。

创建icon.png和icon128.png文件作为扩展程序的图标，需要对应manifest.json文件内提到的两个icon文件，这两个文件可以是PNG或JPG格式。
在Chrome浏览器中打开扩展程序管理页面chrome://extensions/，启用开发者模式，点击"加载已解压的扩展程序"按钮，选择"Chrome-Extension"文件夹，即可在浏览器中安装和调试扩展程序。
最后，将扩展程序发布到Chrome Web Store进行审核和发布。这方面还未进行实测试验。据闻：对于简单的扩展程序，只需将文件夹内容打包为.zip格式，然后将其上传到Web Store即可。审核通过后，用户可以在Chrome浏览器的应用商店中搜索并安装该扩展程序。