返回

小白的福音！10分钟搞懂Chrome插件开发

前端

Chrome插件开发入门

Chrome插件开发，听上去很高大上，其实只要熟悉HTML、CSS、JS即可开发，插件也是将html页面渲染出来并执行js脚本而已。

  1. 新建一个文件夹，目录结构如下：
my-extension
├── manifest.json
├── popup.html
├── popup.js
  1. 创建manifest.json配置文件

manifest.json是插件的配置文件，它告诉Chrome浏览器你的插件做了什么，以及它需要哪些权限。

{
  "manifest_version": 2,
  "name": "My Extension",
  "description": "This is my first Chrome extension.",
  "version": "1.0",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}
  1. 创建popup.html文件

popup.html是你的插件的弹出窗口。当用户点击浏览器工具栏中的插件图标时，就会显示这个窗口。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>
  1. 创建popup.js文件

popup.js是你的插件的JavaScript文件。这个文件可以用来操作DOM，发送消息给其他脚本，或者与Chrome浏览器交互。

document.addEventListener('DOMContentLoaded', function() {
  console.log('Hello, world!');
});
  1. 将你的插件加载到Chrome浏览器

现在，你可以将你的插件加载到Chrome浏览器了。为此，请打开Chrome浏览器的扩展程序页面，然后点击“加载已解压的扩展程序”。选择my-extension文件夹，然后点击“确定”。

你的插件现在应该已经安装好了。你可以点击浏览器工具栏中的插件图标来打开弹出窗口。

结语

以上就是Chrome插件开发入门教程。希望你能从中学习到一些东西，并能开发出你自己的插件。