后面，咱们实现了一个简略的插件. 也晓得了manifest.json的格局. 当初咱们就来看一看chrome浏览器在哪些入口来操作咱们的插件. 这里只介绍罕用的.
popup页面
这个我就不多说了. 后面的咱们用来做批量关上的小工具时. 就是用了popup的入口. 额定留神. 这里是一个单入口文件. 在manifest.json中这样申明
"action": { "default_popup": "popup.html"}就自定义好了.
option页面
option选项. 这里就是能够自定义插件的选项配置. 这里能够定义一些插件运行过程的所需的配置. 申明如下
"options_page": "options.html"这样就申明了一个options的页面. 而后入口是options.html. 简略书写一个. 如下.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>options</title></head><body> <h1>这里是options页面</h1></body></html>关上过后就是上面这个样子
尽管有点low. 阐明就好了.
devtools_page
如果要应用devtools_page, 就须要在manifest.json申明. 如下
"devtools_page": "devtools.html"这样就指定了一个html.留神. 这里仅仅是入口. 如果你指定了devtools.html过后. 如果外面没有创立其余货色. 你将看不到任何输入和后果. 仅仅用于当作是入口而已. 在devtools中. 有两中形式能够查看. 一个是panel. 面板. 展现在devtools的工具栏上. 如下.
还有一种叫做sidebar. 这种展现在devtools的右侧. 如下.
上面就简略创立一下. 首先引入devtools.html是必要条件. 外面的内容如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Devtools</title></head><body> <h1>devtools</h1> <script src="devtools.js"></script></body></html>而后在同级目录下创立devtools.js. 外面内容如下.
// 申明panel.htmlchrome.devtools.panels.create("CRX Panel", "assets/logo.png", "devtool/panel.html", function(panel) { console.log('创立胜利了') });// 申明sidebar.htmlchrome.devtools.panels.elements.createSidebarPane("Crx Sidebar", function(sidebar) { sidebar.setPage("devtool/sidebar.html"); sidebar.setHeight("8ex"); });而后在devtool文件夹下申明panel.html和sidebar.html. panel.html如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>panel</title></head><body> <h1>Devtool panel</h1></body></html>sidebar.html如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Side Bar</title></head><body> <h1>Devtools Side bar</h1></body></html>这样咱们就能看成果了. 成果就是上面这个样子
其余自定义入口
一个是content script. 用于获取网页面上的元素内容等.定义如下.
"content_scripts": [ { "matches": ["https://*.nytimes.com/*"], "css": ["my-styles.css"], "js": ["content-script.js"] } ]content script能够有一个或多个脚本. 也能够注入一个或多个款式. 这里的款式级别仅次于浏览器默认的. 级别很高. 还有一个background. 就是之前的背景页. 不过在3版本的时候叫做service worker. 定义如下
"background": { "service_worker": "background.js", // 背景页的逻辑.}留神. background是为常驻过程. 能够始终追随浏览器的生命周期. 还有两个不罕用的. 如下.
//自定义的设置. 这里就很多了. 能够参考这个网址. // https://developer.chrome.com/docs/extensions/mv3/settings_override/ "chrome_settings_overrides": {}, // 更改默认的tab页面. "chrome_url_overrides": { "pageToOverride": "myPage.html" }以上, 就是咱们罕用的一些自定义页面的操作了.
最初
演示代码