Chrome扩展开发指南(4)——Options Pages（选项页面）

最新推荐文章于 2024-09-03 16:40:55 发布
最新推荐文章于 2024-09-03 16:40:55 发布
阅读量2.4k 收藏
点赞数
文章标签： chrome 扩展 extension function user css

Chrome扩展开发指南(4)——Options Pages（选项页面）

你可以提供一个选项页面(Options Pages)让用户自定义你的扩展。如果设置了选项页面，那么扩展管理页chrome://extensions将会有一个链接指向选项页面。

定义选项页面包括两步：

1、在manifest中定义选项页
  1. {
  2.   "name": "My extension",
  3.   ...
  4.   "options_page": "options.html",
  5.   ...
  6. }
复制代码

上例中，options_page代表选项页面，options.html是具体的文件地址。

2、编写选项页面

选项页面是一个典型的网页，下面是一个选项页面的例子：

  1. <html>
  2. <head><title>My Test Extension Options</title></head>
  3. <script type="text/javascript">

  5. // Saves options to localStorage.
  6. function save_options() {
  7.   var select = document.getElementById("color");
  8.   var color = select.children[select.selectedIndex].value;
  9.   localStorage["favorite_color"] = color;

  11.   // Update status to let user know options were saved.
  12.   var status = document.getElementById("status");
  13.   status.innerHTML = "Options Saved.";
  14.   setTimeout(function() {
  15.     status.innerHTML = "";
  16.   }, 750);
  17. }

  19. // Restores select box state to saved value from localStorage.
  20. function restore_options() {
  21.   var favorite = localStorage["favorite_color"];
  22.   if (!favorite) {
  23.     return;
  24.   }
  25.   var select = document.getElementById("color");
  26.   for (var i = 0; i < select.children.length; i++) {
  27.     var child = select.children[i];
  28.     if (child.value == favorite) {
  29.       child.selected = "true";
  30.       break;
  31.     }
  32.   }
  33. }

  35. </script>

  37. <body οnlοad="restore_options()">

  39. Favorite Color:
  40. <select id="color">
  41. <option value="red">red</option>
  42. <option value="green">green</option>
  43. <option value="blue">blue</option>
  44. <option value="yellow">yellow</option>
  45. </select>

  47. <br>
  48. <button οnclick="save_options()">Save</button>
  49. </body>
  50. </html>
复制代码
注意事项

早期版本的chrome可能不支持这个功能。

我们正计划提供一个默认的css来使得不同扩展的选项页面保持风格一致，你可以从这里(http://crbug.com/25317)查看最新的进展。

知识补充

上面的例子中使用LOCALSTORAGE保存数据，具体介绍可以查看《使用LOCALSTORAGE保存数据》

杠杠PP
关注
Chrome扩展开发学习笔记之带选项页面的扩展
晚黎的博客
06-23 2574
简介有一些扩展允许用户进行个性化设置，这样就需要向用户提供一个选项页面。Chrome通过Manifest文件的options_page属性为开发者提供了这样的接口，可以为扩展指定一个选项页面。当用户在扩展图标上点击右键，选择菜单中的“选项”后，就会打开这个页面。对于没有图标的扩展，可以在chrome://extensions页面中单击“选项”。
Chrome Extension options_page & storage【谷歌浏览器扩展之选项页和storage】
拭血的专栏
08-30 3324
使用 chrome.storage.local API 存储 options_page 页的配置信息，须在 manifes 文件里配置 options_page 和 permissions，页面已禁止内嵌的 js 和 css（style标签），须引入文件方可。 "options_page": "options.html", "permissions": [ "storage" ] 浏览器
chrome 插件开发入门
最新发布
simon的博客
09-03 3333
chrome 插件开发入门
chrome选项页面options page配置
03-02 947
通过Chrome 浏览器的“工具 ->更多工具->扩展程序”，打开chrome://extensions页面，可以看到有的Google Chrome扩展程序有“选项Options”链接，如下图所示。单击“选项Options”就可以弹出options页面。options 页面用以定制Chrome浏览器扩展程序的运行参数。
chrome-options：Chrome扩展程序的“选项”页面
01-30
给定选项结构，创建选项页面应该很简单， 看起来像Chrome的选项。 屏幕截图来自扩展 这是一个。 该库使用进行样式设置。 安装 建议您在扩展程序中创建一个options文件夹，以使事情井井有条。 mkdir options cd options 下载Chrome选项 npm install chrome-options ln node_modules/chrome-options/options.html . touch custom.css touch options.js 将选项页面添加到manifest.json 。 都支持将open_in_tab设置为true或false 。 "options_ui": { "page": "options/options.html", "open_in_tab": false } 需要storage权限。 选项将保存到 。 "permissions": [ "storage" ] 如果您要使用声音字段，并且想播放内容脚本中的声音，请添加 "web_accessible_resources": [ "options
Chrome扩展开发入门指南
blackli
03-27 189
这是制作chrome扩展插件的入门指南，不需要任何编程基础，看完这个后，我们就着手做自己的Chrome插件了。好吧，我们现在就开始，其实我也是个新手。     准备工具 做任何事情都要有个工具，制作chrome插件需要的工具很少。 记事本，用来编写代码 Chrome浏览器，这个不能少吧。Windows下，所有版本的Chrome都可以制作插件。Linux下需要下载Be...
Chrome扩展框架- 共享数据之options_page创建数据，其他页面devtools pannel、popup、options、content_script 能够读取
Penk的博客
03-19 608
有一个需求，需要从页面中保存数据到本地，供使用，已验证可以实现。popup以及页面应该也是可以的，后期继续测试~~~共享数据之options_page创建数据，devtools pannel、popup、options、content_script 能够读取。
chrome 扩展开发手册（一）——准备
chuh的博客
08-09 1491
chrome Extensions翻译过来就是谷歌扩展，但我们更喜欢叫它谷歌浏览器扩展或chrome扩展。chrome扩展： 扩展程序是定制浏览体验的小型软件程序。 它们使用户能够根据个人需求或偏好定制Chrome功能和行为。 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识...
Chrome扩展开发基础教程（附HelloWorld）
氷泠
02-12 4235
1 概述 Chrome扩展开发的基础教程，代码基于原生JS+H5+CSS，教程内容基于谷歌扩展开发官方文档。 2 环境 Chrome 88.0.4324.96 Chromium 87.0.4280.141 Brave 1.19.84 FireFox 85.0 WebStorm 2020.3.2 3 开发环境准备 开发扩展建议使用WebStorm，推荐WebStorm的原因是能够补全，在设置中的Libraries中可以下载chrome的库，这样就能够补全了： 另一个建议使用的是VSCode，但是笔者目
chrome插件开发——option(选项页)的通信
鱼丸粗面不要香菜
03-22 8953
chrome插件开发中的options页，就是插件的设置页面，有2个入口，一个是右键图标有一个“选项”菜单，还有一个在插件管理页面： 要想在插件中开启这个功能需要在配置页中进行配置，浏览器版本不同，配置的方法也不同 manifest.json // Chrome40以前的插件配置页写法 "options_page": "options.html", // Chrome40以后的插...
angular-chrome-options:Chrome 的选项页面生成器
06-18
angular-chrome-options是一个实验性的AngularJS应用程序，它从位于应用程序根目录的单个 JSON 清单生成 Chrome 应用程序和扩展的选项页面。 查看options.json.sample以了解如何生成选项页面。 然后可以通过注入...
ChromeOptions
weixin_43625263的博客
04-13 891
from time import sleep from selenium import webdriver class ChromeOptions: def options(self): options = webdriver.ChromeOptions() # driver = webdriver.Chrome(chrome_options=options) # 无头模式： # options.add_argument(‘–headless’) # 窗口最大化： options.add_argument(
ChromeOptions常用配置与WebUI实操
一名在读学生
02-25 1437
转载自：https://www.cnblogs.com/Murraya/p/13174341.html
chrome浏览器的options参数
热门推荐
c26890的博客
04-20 1万+
chrome浏览器的options参数 一、部分常用options参数 options.add_argument('--disable-infobars') # 禁止策略化 options.add_argument('--no-sandbox') # 解决DevToolsActivePort文件不存在的报错 options.add_argument('window-size=1920x3000') # 指定浏览器分辨率 options.add_ar...
【Chrome】1898- Chrome 插件开发指南和实践
pingan8787
12-18 308
本文代码：https://github.com/nyqykk/hello-extensions-react阅读本文你将了解到Chrome 插件整体架构；如何开发一个 Chrome 插件（Popup 和 Devtools）；如何使用前端框架（React/Vue）进行开发；如何调试插件；如何使用 Puppeteer 对插件进行 E2E 测试（本地和 CI 环境）。整体架构介绍明确概念Chrome 插件...
ChromeOptions配置
开摆
02-02 1256
代码封装：新建chrome_options.py。
Selenium 选项 chrome_options
yudiandian2014的专栏
08-03 2871
selenium 选项 chrome_options
Chrome扩展开发指南--入门
{丸の子}
12-12 144
这是制作chrome扩展插件的入门指南，不需要任何编程基础，看完这个后，我们就着手做自己的Chrome插件了。好吧，我们现在就开始，其实我也是个新手。 [img]http://dl.iteye.com/upload/attachment/604411/f37dc5a2-174a-3176-97c8-29a8b3b97a0d.gif[/img] 准备工具 做任何事情都要有个工具，制作c...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值