吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 2046|回复: 2
收起左侧

[会员申请] 申请会员ID:ch1no【申请通过】

[复制链接]
吾爱游客  发表于 2023-2-25 00:14

1、申请ID:ch1no
2、个人邮箱:1571394785@qq.com
3、原创技术文章

关于Chrome插件开发的教程及自己开发过程中的经验总结

一.简介

Chrome是后缀名为crx格式的文件,用以在chromium内核的浏览器上提供扩展功能,因此Edge,Chrome以及国内众多基于Chromium的浏览器都可以使用这种方式开发的插件,目前国内开发文档相对较少,有较古老的360浏览器翻译过的版本https://open.se.360.cn/open/extension_dev/overview.html

二.项目结构

Chrome插件没有较为严格的结构要求,只要求在根文件目录下有一个manifest.json的文件用以描述插件的名称,权限,介绍等基础功能

三.从零开始创建一个chrome插件

在根目录下新建mainifest.json

{
    "name": "__MSG_title__", //插件的名称
    "icons": {  //插件的图标,对应不同大小
        "16": "logo16.png",
        "48": "logo48.png",
        "128": "logo128.png"
    },
    "description": "__MSG_pluginDesc__",//插件的描述
    "version": "1.0",//插件的版本号
    "manifest_version": 3, //manifest文件的版本号2已经被淘汰,不能使用
    "permissions": //插件需要的权限
        "tabs",
        "storage"
    ],
    "action": {//插件的动作
        "default_popup": "popup.html",//被点击时打开popup.html
        "default_title": "Hello Extensions"//鼠标移动上图标的描述
    },
    "background": {//下文介绍background.js
        "service_worker": "js/background.js"
    },
    "host_permissions": [//允许在什么域名使用
        "http://*/*",
        "https://*/*"
    ],
    "content_scripts": [//content_scripts
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "js": [
                "js/jquery-1.11.1.min.js",
                "js/jquery.danmu.min.js",
                "js/content.js"
            ],
            "run_at": "document_end",//脚本在什么时候运行
            "all_frames": true//是否允许插件在iframe中运行
        } 
    ],
    "default_locale": "zh_CN"//默认语言
}

在项目的根目录下新建popup.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>popup</title>
</head>
<body>
    <h1>popup</h1>
</body>
</html>

可实现最简单的效果  

四.5种类型的JS对比

Chrome插件的JS主要可以分为这5类:injected script、content-script、popup js、background js和devtools js

1.injected script

injected script是在页面中注入的脚本,可以通过chrome.tabs.executeScript()来执行,也可以通过manifest.json中的content_scripts来执行(通常不使用)

2.content-script

content-script是在页面中注入的脚本,可以通过chrome.tabs.executeScript()来执行,也可以通过manifest.json中的content_scripts来执行

3.popup js

popup js是在popup.html中执行的js,可以通过manifest.json中的action来执行,当插件被点击时,会打开popup.html,然后执行popup.js

4.background js

background js是生命周期最长的js,当浏览器启动时,会执行background.js,当浏览器关闭时,background.js才会关闭,可以通过manifest.json中的background来执行

5.devtools js

用以开发chrome的开发者工具,可以在开发者工具中添加自己的功能,比如在console中添加自己的功能,或者在elements中添加自己的功能,这里不做介绍

五.权限

共有

"contextMenus", // 右键菜单
 "tabs", // 标签
 "notifications", // 通知
 "webRequest", // web请求
 "webRequestBlocking",
 "storage", // 插件本地存储
 "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
 "https://*/*" // 可以通过executeScript或者insertCSS访问的网站

是经常用到的权限,在manifest.json中的permissions中添加

六.消息传递

不同的js之间可以通过消息传递的方式来传递消息,比如popup.js向background.js传递消息,background.js向content.js传递消息  

injected-script content-script popup-js background-js
injected-script - window.postMessage - -
content-script window.postMessage - chrome.runtime.sendMessage chrome.runtime.connect chrome.runtime.sendMessage chrome.runtime.connect
popup-js - chrome.tabs.sendMessage chrome.tabs.connect - chrome.extension. getBackgroundPage()
background-js - chrome.tabs.sendMessage chrome.tabs.connect chrome.extension.getViews -

七.开发过程中的经验总结

1.如何获取iframe中的dom

需要在manifest.json中的content_scripts中添加all_frames:true

2.在chrome插件中是严格js模式

3.本地存储

chrome插件中的本地存储可以通过chrome.storage来实现,chrome.storage是一个异步的API,因此需要使用回调函数来获取数据

// 读取数据,第一个参数是指定要读取的key以及设置默认值
chrome.storage.sync.get({color: 'red', age: 18}, function(items) {
 console.log(items.color, items.age);
});
// 保存数据
chrome.storage.sync.set({color: 'blue'}, function() {
 console.log('保存成功!');
});

注意:chrome.storage.sync是云端存储,chrome.storage.local是本地存储,chrome.storage.sync的存储空间更小,但是可以跨设备同步,chrome.storage.local的存储空间更大,但是不可以跨设备同步

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

Hmily 发表于 2023-2-27 17:20
I D:ch1no
邮箱:1571394785@qq.com

申请通过,欢迎光临吾爱破解论坛,期待吾爱破解有你更加精彩,ID和密码自己通过邮件密码找回功能修改,请即时登陆并修改密码!
登陆后请在一周内在此帖报道,否则将删除ID信息。

ps:内容有些简单了,期待以后有更多分享。
ch1no 发表于 2023-3-4 19:59
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-15 01:12

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表