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

Chrome插件教程1-manifest入门

时间:2023-03-27 16:52:52 JavaScript

关于chrome插件。可能每个人都会或多或少的用到几个。比如wappalyzer、screenshot、Fehelper等,这些或多或少给我们使用浏览器带来了极大的便利。如何开发扩展?中国这样的文件比较少。接下来我们来剖析chrome插件需要什么。如果你想通过分析chrome插件来开发插件,首先我们来看看如何编写一个简单的chrome插件。来看个例子https://github.com/orbitbot/chrome-extensions-examples/tree/master/basic_1先来看目录├──icon.png//图标文件├──manifest.json//声明文件├──popup.css//popup.html引用的css├──popup.html//页面文件├──popup.js//弹出页面引用的js文件└──README.md//描述文件按照我们知道的进行分组首先icon是图标文件,不好理解。popup.js、html、css都是一页。一套。还有一个manifest.json集。自述文件.md。一组仓库描述文件。除了我们只需要查看manifest.json文件。大家对html/js/css都有一定程度的了解。也就是说我们的chrome插件必须有一个manifest.json文件。让我们看一下.manifest.json,因为我们想了解这个json文件。那么我们就要明白里面应该填什么内容了。我们来看看官方提供的比较全面的manifest.json文件。{//强制"manifest_version":3,//清单版本。有1,2,3不同版本表示的参数不一致。官方推荐3"name":"MyExtension",//扩展名"version":"versionString",//扩展版本号//推荐"action":{...},//新版本3.行为。可以控制chrome扩展上的显示文字和其他图标"default_locale":"en",//默认使用语言。如果使用.,则必须在_locales文件夹下包含相应版本的文件"description":"Aplaintextdescription",//extendeddescription"icons":{...},//icons//Optional"author":...,//作者"automation":...,//自动化。目前,官方并没有给出相应的信息。"background":{//背景页面参数。//必需"service_worker":"background.js",//后台页面的逻辑。//可选的“类型”:...//类型。目前可以填写模块。使用ES模块编写。},//覆盖Chrome设置"chrome_settings_overrides":{...},//更改默认标签页"chrome_url_overrides":{...},//自定义chrome命令"commands":{...},"content_capabilities":...,//内容脚本"content_scripts":[{...}],//内容限制策略csp"content_security_policy":{...},//转换用户的脚本"converted_from_user_script":...,//csp内容策略嵌入器"cross_origin_embedder_policy":{"value":"require-corp"},//csp开放策略"cross_origin_opener_policy":{"value":"same-origin"},//当前本地化"current_locale":...,"declarative_net_request":...,//调试页面"devtools_page":"devtools.html","differential_fingerprint":...,//事件规则,主要用于declaretiveContent的事件监听器"event_rules":[{...}],//定义一些网页或扩展来访问你开发的扩展"externally_connectable":{"matches":["*://*.example.com/*"]},//文件下载器"file_browser_handlers":[...],//管理文件下载器"file_system_provider_capabilities":{"configurable":true,"multiple_mounts":true,"source":"network"},//首页地址"homepage_url":"https://path/to/homepage",//站点权限。允许哪些站点打开您的扩展"host_permissions":[...],//导入共享模块"import":[{"id":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],//隐身模式设置"incognito":"spanning,split,ornot_allowed",//"input_components":...,//公钥"key":"publicKey",//chrome最低版本"minimum_chrome_version":"versionString",//声明文件的处理方式后缀"nacl_modules":[...],"natively_connectable":...,"oauth2":...,"offline_enabled":true,//设置多功能框"omnibox":{"keyword":"aString"},//选项菜单使用的权限"optional_permissions":["tabs"],//选项菜单页面"options_page":"options.html",//执行页面,是否使用chrome的ui"options_ui":{"chrome_style":true,"page":"options.html"},//权限"permissions":["tabs"],"platforms":...,"replacement_web_app":...,//声明所需的依赖项"requirements":{...},//定义一组要在沙箱中使用的页面"sandbox":[...],//短扩展名"short_name":"ShortName",//定义存储"storage":{"managed_schema":"schema.json"},"system_indicator":...,"tts_engine":{...},//声明更新地址"update_url":"https://path/to/updateInfo.xml",//版本名称"version_name":"aString",//网络资源的访问权限"web_accessible_resources":[...]}终于明白了基本结构。我们来做首先是一个简单的扩展。