1,471
社区成员
发帖
与我相关
我的任务
分享我和谷歌共成长——谷歌浏览器插件开发历程
前沿
谷歌浏览器如今已经成为主流浏览器，基于此的插件开发也有大量成熟文档。Web功能需要网络才能使用，而浏览器插件却是本地的，更加方便，能大幅度提高我们的效率。
一、demo
新建一个文件夹，目录结构如下：
chrome-plugin-demo
├── background.js
├── images
│ ├── 128.png
│ ├── 16.png
│ ├── 32.png
│ └── 48.png
├── manifest.json
├── popup.html
└── popup.js
manifest.json，其内容为：
{
"manifest_version": 2,
"name": "Export Images",
"description": "demo",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
创建 popup.html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#content{color: red;}
</style>
</head>
<body>
<h1>chrome-plugin-test</h1>
<p id="content"></p>
<script src="popup.js"></script>
</body>
</html>
a)点击
图标，在菜单中选择工具>扩展程序，这会打开扩展管理的页面
b)如果“开发人员模式”旁边有个“+”号，点击这个“+”号进入开发人员模式。“+”号会变成“-”号，同时会显示更多的按钮和信息
c)点击“载入正在开发的扩展程序…”按钮，会出现一个文件选择对话框
d)在对话框中，找到扩展目录并点击“确定”
如果扩展是正确的，它的图标就会显示在地址栏右侧，扩展的信息也会显示在扩展管理页面上，如下图所示：
当前页面的所有图片，全部被一键提取出来了。
需要源码，私聊我
更多好用工具，请参考：developers.google.com/
...全文
请发表友善的回复…
发表回复
Drw_Dcm 2022-08-15
- 打赏
- 举报
写的非常详细，逻辑清晰透彻，有条理
敬之学长 2022-08-15
- 打赏
- 举报
谷歌浏览器插件，又学到了！
爱编程的大李子 2022-08-15
- 打赏
- 举报
谷歌插件分享的太棒了，学到了
买下至真园！ 2022-08-15
- 打赏
- 举报
谷歌插件分享的好呀
一马途追 2022-08-15
- 打赏
- 举报
谷歌浏览器插件，又学到了！
菜菜的变强之路 2022-08-14
- 打赏
- 举报
优质分享,必须支持
小鹏linux 2022-08-14
- 打赏
- 举报
优质文章必须支持
Nebula-monarch 2022-08-13
- 打赏
- 举报
无
