当前位置: 首页 > Web前端 > HTML5

30分钟开发一款抓取网站图片资源的浏览器插件

时间:2023-04-05 10:51:07 HTML5

开发一个浏览器插件,我们只需要有一个manifest.json文件即可。为了快速开发一个浏览器插件,我们需要打开浏览器开发者工具。具体步骤如下:在谷歌浏览器中输入chrome//extensions/启动开发者模式,导入自己的浏览器插件包。通过以上三步,我们就可以开始浏览器插件的开发之旅了。浏览器插件一般都放在浏览器地址栏的右侧,我们可以点击manifest.json文件配置插件的图标,配置一定的规则,然后就可以看到我们浏览器的图标了插件,如下图所示:下面详细解释一下浏览器插件开发的核心概念。2、核心知识点浏览浏览器插件一般涉及以下核心文件:manifest.json用于配置插件相关的所有配置(必须放在根目录下)background.js后台脚本(background页面),生命周期与浏览器一致,全局代码一般放在content-scripts插件中,是一种向页面注入脚本的形式。我们可以通过content-scripts在页面中注入js和css资源,并控制允许注入弹窗的范围点击插件图标后打开的自定义窗口,用于处理用户交互作者画了一个简单的图来大致展示它们之间的关系:接下来我们来看一些核心知识点。2.1manifest.json谷歌官网为我们提供了一个简单的配置,如下:{"name":"MyExtension","version":"2.1","description":"GetsinformationfromGoogle","icons":{“128”:“icon_16.png”,“128”:“icon_32.png”,“128”:“icon_48.png”,“128”:“icon_128.png”},“背景”:{“持久”":false,"scripts":["background_script.js"]},"permissions":["https://*.google.com/","activeTab"],"browser_action":{"def屏蔽网页广告,自定义页面皮肤等。manifest.json中的基本配置如下:{"content_scripts":[{"matches":["http://*/*","https://*/*"],"js":["lib/jquery3.4.min.js","content_script.js"],"css":["base.css"]}],}在上面的代码中我们定义了content_scripts在允许注入页面的范围内,插入页面的js和css,这样我们就可以很方便的改变某个页面的样式。比如我们可以在页面中注入一个按钮:后面浏览器插件案例中笔者会详细介绍content_scripts的使用方法。2.4popuppopup是用户点击插件图标时打开的小窗口。当失去焦点时,窗口立即关闭。我们一般用它来处理一些简单的用户交互和插件指令这里主要关注popup.js和content_script.js。popup.js主要用于获取content_script页面传来的图片数据,并显示在popup.html中。另外需要注意的是,当页面没有注入生成按钮时,popupu需要向内容页面发送信息,主动让其生成按钮。代码如下:chrome.storage.sync.get('imgArr',function(data){data.imgArr&&data.imgArr.forEach(item=>{varimgWrap=$("

")varimg=$("")imgWrap.append(img);$('#content').append(imgWrap);$('.empty').hide();})});$('#activeBtn').click(function(element){chrome.tabs.query({active:true,currentWindow:true},function(tabs){chrome.tabs.sendMessage(tabs[0].id,"activeBtn",function(response){console.log(response);});});});对于内容页面,我们需要实现的是动态生成按钮,并在页面中植入弹窗,展示获取到的图片。另一方面,我们需要将图片数据传入storage,这样弹出页面才能获取到图片数据。