Omnibox

omnibox：应用程序界面允许向Google Chrome的地址栏注册一个关键字，地址栏也叫omnibox。
在这里插入图片描述
首先是用户在地址栏上输入了一个关键词并按下tab键，当检测到特定的关键词与我们事先指定的关键词相匹配时将调用对应的插件，如下图：

接下来用户再输入的东西将会传给插件，同时我们知道，一个输入框会有很多个事件，为了更好的与用户交互，通常会监听这些事件来辅助用户输入，比如自动完成之类的，在用户输入的时候会给出一些搜索建议，从代码结构上说，这些事件都是挂载在chrome.omniox上的一些回调函数，接下来的重点就是介绍这些事件。

manifest 声明

使用omnibox 应用程序界面，必须在 manifest 中包含omnibox 关键字段。需要指定像素为16x16的图标，以便当用户输入关键字时，在地址栏中显示。

"omnibox": {
    
    
    "keyword": "hello"
},
"icons": {
    
    
    "16": "hello_extensions.png",
    "48": "hello_extensions.png",
    "128": "hello_extensions.png"
}

注： Chrome 自动创建灰度模式16x16像素的图标。你应该提供全色版本图标以便可以在其他场景下使用

方法和事件

方法和事件建议写在background.js ，这样可以常驻
在这里插入图片描述

setDefaultSuggestion

chrome.omnibox.setDefaultSuggestion(
	{
    
    
		description:显示在缺省建议中的文本，可以包含'%s'并可以被用户输入替换
	}
)

设置缺省建议的描述和风格。缺省建议是显示在 URL地址栏下的第一个建议显示文字

onInputChanged

chrome.omnibox.onInputChanged.addListener(function(string text, function suggest) {
    
    ...});

用户修改了在 omnibox中的输入。

suggest 事件回调，用来在事件发生的时候，发送回建议给浏览器

onInputEntered

chrome.omnibox.onInputEntered.addListener(function(string text) {
    
    ...});

用户接收了omnibox中的数据

扫描二维码关注公众号，回复： 14522106 查看本文章

onInputStarted

chrome.omnibox.onInputStarted.addListener(function() {
    
    ...});

用户输入扩展的关键字，开始了一个键盘输入会话。这个事件在会话开始时发送，早于其它事件，而且一个会话只会发送一次。

其他内容

一个插件不能设置多个关键词
当多个插件的关键词重复时，后安装的插件会覆盖前面的

demo

不要写在下面的事件里，写在里面只会执行一次，直接写在background.js里就行

chrome.runtime.onInstalled.addListener(function () {
    
      
  //插件安装后添加的监听
});

//当用户按下tab，并输入第一个字符触发
chrome.omnibox.onInputStarted.addListener(() => {
    
    
    //不知道是不是自己的问题，反正没看见日志被打印出来
    console.log("[" + new Date() + "] omnibox event: onInputStarted");
});

//当用户输入改变，可以提供一些建议
chrome.omnibox.onInputChanged.addListener((text, suggest) => {
    
    
    if (text.includes('hello')) {
    
    
        // 为用户提供一些搜索建议
        suggest([
            {
    
    
                content: text + "JavaScript",
                description: "是否要查看与JavaScript有关的内容？",
            },
            {
    
    
                content: text + "Flutter",
                description: "是否要查看与Flutter有关的内容？",
            }
        ]);
    }
});

在这里插入图片描述

选项页

为了让用户设定你的扩展功能，你可能需要提供一个选项页。如果你提供了选项页，在扩展管理页面 chrome://extensions 上会提供一个链接。点击选项链接就可以打开你的选项页。

在manifest中定义你的选项页

{
    
    
  "name": "My extension",
  ...
  // Chrome40以前的插件配置页写法
  "options_page": "hello_options.html",
  //Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
  	"options_ui": {
    
    
		"page": "hello_options.html",
		// 添加一些默认的样式，推荐使用
		"chrome_style": true
	},
  ...
}

编写选项页内容

hello_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>hello 扩展选项页</title>
  </head>
  <body>
    <h1>你最喜欢的语言是什么</h1>
    <select id="language">
      <option value="JavaScript">JavaScript</option>
      <option value="Java">Java</option>
      <option value="python">python</option>
      <option value="dart">dart</option>
    </select>
     <div id="status" style="width: 100px; height: 50px"></div>
    <button id="save">保存</button>
  </body>
   <script src="./jquery.js"></script>
  <script src="./options.js"></script>
</html>

options.js

选项页的逻辑

//保存选项到localStorage
function save_option() {
    
    
    let select = $('#language')
    //获取下拉选中的值
    let language = select.children[select.selectedIndex].value
    //保存
    localStorage['favorite_language'] = language

    let status = $('#status')
    status.html('选项已保存')
    setTimeout(() => {
    
    
        status.html("")
    },700)
}
function restore_options() {
    
    
    var favorite = localStorage["favorite_language"];
    if (!favorite) {
    
    
        return;
    }
    let select = $('#language')
    for (var i = 0; i < select.children.length; i++) {
    
    
        var child = select.children[i];
        if (child.value == favorite) {
    
    
            child.selected = "true";
            break;
        }
    }
}
//当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，而不需要等待样式表，图像和子框架页面加载
document.addEventListener('DOMContentLoaded', restore_options);
document.querySelector('#save').addEventListener('click', save_option);

在这里插入图片描述

补充：homepage_url

用于设置扩展网站的，在manifest 中声明

 "homepage_url": "https://www.baidu.com"

声明后会出现打开扩展网站，点击后会跳转到声明的网站里
在这里插入图片描述

覆盖特定页

使用替代页，可以将Chrome默认的一些特定页面替换掉，改为使用扩展提供的页面。这让扩展开发者可以开发更多有趣或者实用的基本功能页面。替代页通常会有大量的CSS和JavaScript代码。

扩展可以替代如下页面：

书签管理器：从工具菜单上点击书签管理器时访问的页面，或者从地址栏直接输入 chrome://bookmarks。
历史记录：从工具菜单上点击历史记录时访问的页面，或者从地址栏直接输入 chrome://history。
新标签页：当创建新标签的时候访问的页面，或者从地址栏直接输入 chrome://newtab。

注意： 一个扩展只能替代一个页面。

注意： 如果你替代隐身窗口的页面，请注意要在manifest中将 incognito 属性指定为 “spanning”。

注意： 你不能替代隐身窗口的新标签页。

在manifest中进行声明

{
    
    
  "name": "My extension",
  ...
 
  "chrome_url_overrides" : {
    
    
    "newtab": "myPage.html"
  },
  ...
}

提示

要制作一个优秀的替代页，请一定遵循如下指导原则：

你的页面实现的要即小又快。
用户希望内建的浏览器页面可以快速的打开，请避免做一些要消耗很多时间的事。如：尽量避免从网络中或者数据库资源中提取数据。
页面要带标题。
否则用户可能会看到网页的URL，造成困扰。其实就是在页面头上加入：NewTab
别指望页面会获得键盘输入焦点。
通常新标签创建的时候，地址栏会获得输入焦点，而不是页面。
别试着模仿默认的新标签页。
对于新标签页上的重要功能支持，如：最近关闭的标签、主题背景图等，APIs的支持尚未完善，在这些APIs确认完备之前，你最好做一些完全不同的新标签页设计（以避免使用这些非正式的APIs）。

demo

<!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>这是覆盖页</title>
  </head>
  <body>
    <a href="https://www.baidu.com/">百度</a>
  </body>
</html>

新打开的页面会显示自己定义的页面
在这里插入图片描述

浏览器外观（Omnibox、选项页、覆盖特定页）

Omnibox

manifest 声明

方法和事件

其他内容

demo

选项页

在manifest中定义你的选项页

编写选项页内容

覆盖特定页

在manifest中进行声明

提示

demo

猜你喜欢