🏆作者简介，黑夜开发者，CSDN领军人物，全栈领域优质创作者✌，CSDN博客专家，阿里云社区专家博主，2023年6月csdn上海赛道top4。
🏆数年电商行业从业经验，历任核心研发工程师，项目技术负责人。
🏆本文已收录于专栏：100个JavaScript的小应用。
🎉欢迎 👍点赞✍评论⭐收藏
文章目录
🚀一、背景
Chrome扩展程序是一种可以增强Chrome浏览器功能的插件，它可以通过添加新的界面元素、修改网页内容或与浏览器进行交互等方式来实现功能增强。本文将介绍如何开发一个简单的Chrome扩展程序，该程序能够在面板上显示一个按钮，点击按钮后可以跳转到百度。并且后面再给出一个进阶一点的教程，通过网页通信抓取显示页面所有图片。
🚀二、插件开发流程
- 创建扩展程序文件夹
- 添加清单文件manifest.json
- 编写HTML文件
- 编写JavaScript文件
- 加载扩展程序
🔎2.1. 创建扩展程序文件夹
首先，在本地文件系统上创建一个用于存放扩展程序的文件夹。
🔎2.2 添加清单文件manifest.json
在扩展程序文件夹中创建一个名为manifest.json的文件。清单文件是Chrome扩展程序的核心配置文件，用于描述扩展程序的各个组件和属性。
以下是一个简单的manifest.json示例：
{
"manifest_version": 2,
"name": "My Extension",
"version": "1.0",
"description": "A simple Chrome extension",
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"permissions": [
"webNavigation",
"tabs"
]
}
在这个示例中，我们指定了扩展程序的名称、版本、描述和图标等信息，并通过browser_action属性指定了扩展程序默认的弹出页面。
🔎2.3 编写HTML文件
在扩展程序文件夹中创建一个名为popup.html的HTML文件，用于定义面板上要显示的内容。
以下是一个简单的popup.html示例：
<!DOCTYPE html>
<html>
<head>
<title>My Extension</title>
<script src="popup.js"></script>
</head>
<body>
<button id="baiduButton">跳转到百度</button>
</body>
</html>
在这个示例中，我们创建了一个按钮，按钮的id为baiduButton。
🔎2.4 编写JavaScript文件
在扩展程序文件夹中创建一个名为popup.js的JavaScript文件，用于处理按钮的点击事件。
以下是一个简单的popup.js示例：
document.addEventListener('DOMContentLoaded', function() {
var baiduButton = document.getElementById('baiduButton');
baiduButton.addEventListener('click', function() {
chrome.tabs.create({ url: 'https://www.baidu.com' });
});
});
在这个示例中，我们使用chrome.tabs.create方法来创建一个新的标签页，并将其URL设置为百度的网址。
🔎2.5 加载扩展程序
最后，打开Chrome浏览器，在地址栏中输入chrome://extensions/，进入扩展程序管理页面。开启开发者模式后，点击“加载已解压的扩展程序”，选择我们创建的扩展程序文件夹。
至此，我们已经完成了Chrome扩展程序的开发。现在，当我们点击面板上的按钮时，就可以跳转到百度了。来看一下下图演示。
🚀三、网页图片抓取实战
🔎3.1 background.js
创建一个新的文件background.js，并添加以下代码以监听来自popup.js的消息和执行图片收集逻辑
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.action === 'collectImages') {
chrome.tabs.executeScript({
file: 'content/content-script.js'
});
}
});
🔎3.2 content-script.js
创建一个新的文件content.js，用于在页面中注入JavaScript代码来收集图片URL
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.action === 'collectImages') {
var images = Array.from(document.getElementsByTagName('img')).map(function(img) {
return img.src;
});
chrome.runtime.sendMessage({
action: 'sendImages',
images: images
});
}
});
🔎3.3 popup.js
在popup.js文件中添加以下代码以实现按钮点击事件，获取当前Tab页中的所有图片：
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('collectButton').addEventListener('click', function() {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, { action: 'collectImages' }, function(response) {
});
});
});
});
chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){
console.log(response, 'response')
var imageList = document.getElementById('imageList');
imageList.innerHTML = '';
response.images.forEach(function(imageUrl) {
var listItem = document.createElement('li');
var image = document.createElement('img');
image.src = imageUrl;
listItem.appendChild(image);
imageList.appendChild(listItem);
});
});
🔎3.4 manifest.json
在manifest.json文件中添加以下内容以配置扩展
{
"manifest_version": 2,
"name": "Image Collector",
"version": "1.0",
"description": "Collect all images in the current tab",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"contextMenus",
"tabs",
"notifications",
"webRequest",
"webRequestBlocking",
"storage",
"http://*/*",
"https://*/*"
],
"icons": {
"16": "icon.png"
},
"background": {
"scripts": ["background/background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/jquery-1.11.0.min.js", "content/content-script.js"],
"run_at": "document_start"
}
]
}
🔎3.5 效果展示
🚀四、总结
本文介绍了如何开发一个简单的Chrome扩展程序，该程序能够在面板上显示一个按钮，点击按钮后可以跳转到百度。从创建扩展程序文件夹到加载扩展程序，我们一步一步地完成了整个过程。同时也给出了一个较为进阶一点的通信交互图片抓取实战。如果你对Chrome扩展程序的开发有兴趣，可以尝试开发更加复杂和功能丰富的扩展程序，去满足更多的需求和挑战。祝你成功！
图片抓取实战源码在文章顶部，有需要可以去下载。
今天的内容就到这里，我们下次见。
