谷歌插件Image downloader开发之 content script
最新回答
猫诱
2024-09-22 02:50:22
Image Downloader具备以下功能：
配置manifest.json文件，实现content script与popup的使用。
在manifest.json中，通过content_scripts配置注入common.js和inject.js至所有http和https的网站。
定义common方法，用于显示错误信息与补全图片相对路径，确保cdn前缀。
预览代码部分：
通过正则表达式处理路径问题，简化图片路径转换。
尽管正则表达式部分使用了简化方式，实际应用中可能需根据具体路径结构调整。
保留common.js以备公共方法使用，虽当前文件需求不多。
content script中包含三个关键方法：收集img标签src地址、获取背景图片与自定义属性规则的属性值。
img标签src收集方法：
遍历img标签集合，获取src值，对于相对路径或cdn路径，使用concatUrl方法转换为绝对路径，最终形成url地址数组。
背景图片获取方法：
利用getComputedStyle提取所有元素的backgroundImage属性，将url地址单独提取，对于包含多个url的属性，仅取第一个。
自定义属性规则的属性值获取方法：
配置规则通过数组指定，如默认收集所有元素的data-src属性值，以适应网站使用情况。
getAllAttr方法用于获取指定属性的值，getConfigAttrUrl则遍历规则，收集所有属性值，形成数组。
图片收集操作并非即时进行，需用户点击插件后，开始收集当前页面图片，并将数据传输至popup处理。关于content script与popup的交互机制，将在后续文章中详述。
热门标签
