关于chrome:chrome插件教程3自定义页面和入口

后面，咱们实现了一个简略的插件. 也晓得了 manifest.json 的格局. 当初咱们就来看一看 chrome 浏览器在哪些入口来操作咱们的插件. 这里只介绍罕用的.

这个我就不多说了. 后面的咱们用来做批量关上的小工具时. 就是用了 popup 的入口. 额定留神. 这里是一个单入口文件. 在 manifest.json 中这样申明

"action": {"default_popup": "popup.html"}

就自定义好了.

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, 就须要在 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.html
chrome.devtools.panels.create("CRX Panel",
                              "assets/logo.png",
                              "devtool/panel.html",
                              function(panel) {console.log('创立胜利了')
                              });

// 申明 sidebar.html
chrome.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"}

以上, 就是咱们罕用的一些自定义页面的操作了.

演示代码

关于chrome:chrome插件教程3自定义页面和入口

popup 页面

option 页面

devtools_page

其余自定义入口

最初