定制属于你自己的chrome插件

2020年10月10日 11:24:54 [来源：互联网] [阅读：-]

字体:【大中小】

1.加上标志到电脑浏览器对话框，二种方法

1）地址栏右边，如下图：

manifest编码以下：

"browser_action": {
 "default_icon": "images/icon.gif", // 立即界定软件标志
 "default_popup": "popup.html" // 软件弹出窗口html
},

大量材料参照：

http://developer.chrome.com/extensions/browserAction.html

2）地址栏中，如下图：（留意默认设置为掩藏，务必根据js调成）

{
 "name": "根据url操纵软件显示信息与掩藏",
 "version": "1.0",
 "description": "仅有当url中带有g时才显示信息软件",
 "background": { "scripts": ["background.js"] },
 "page_action" : {
 "default_icon" : "icon-19.png",
 "default_title" : "标志hover时显示信息文本"
 },
 "permissions" : [
 "tabs"
 ],
 "icons" : {
 "48" : "icon-48.png",
 "128" : "icon-128.png"
 },
 "manifest_version": 2
}

调成编码以下，在background.js中：

function checkForValidUrl(tabId, changeInfo, tab) {
 // If the letter 'g' is found in the tab's URL...
 if (tab.url.indexOf('g') > -1) {
 // ... show the page action.
 chrome.pageAction.show(tabId);
 }
};
// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);

大量材料参照：

http://developer.chrome.com/extensions/pageAction.html

2.桌面提醒，如下图：（留意是电脑屏幕，而不是chrome中）

改桌面提醒的编码在popup.html的js文件中写就可以（备注名称：chrome软件中不允许写内联js，故必须将js写在外链js中）

编码以下：

var notification = webkitNotifications.createNotification(
 'icon-48.png', // 弹出窗口照片，记牢要在manifest中申明
 'Hello!', // 弹出窗口题目
 '最新动态提醒~~' // 弹窗內容
);
//或是弹出网页
var notification = webkitNotifications.createHTMLNotification(
 '不正确! 网页链接引入失效。 // 弹出窗口详细地址（仅有300*180上下尺寸）
);
notification.show();

这儿还出示了与其他view通讯的插口

var back = chrome.extension.getBackgroundPage();
back.document.body.innerHTML = "";
var views = chrome.extension.getViews({type:"notification"});

3.omnibox，能够根据地址栏拓展，如下图

编码以下：（这儿要留意的一点时，必须键入keyword的值（以下demo是lhs），按tab键才可以进到omnibox方式，进到该方式，事后关联的恶性事件才可以起效）

manifest.json环境变量以下：

{
 "name": "liuhui's Omnibox",
 "description" : "地址栏键入检测",
 "version": "1.1",
 "background": {
 "scripts": ["background.js"]
 },
 "omnibox": { "keyword" : "lhs" },
 "manifest_version": 2
}

background.js文件以下：

//当客户在omnibox中键入时开启，类似地址栏更改时实行
chrome.omnibox.onInputChanged.addListener(
 function (text, suggest) {
 console.log('inputChanged: '   text);
 chrome.omnibox.setDefaultSuggestion({
 description:'默认设置显示信息'
 });
 suggest([
 {content:text   " one", description:"the first one"},
 {content:text   " number two", description:"the second entry"}
 ]);
 }
);
//当客户点一下omnibox往下拉提醒时实行（默认设置加上了google检索，点一下时不开启此恶性事件）
chrome.omnibox.onInputEntered.addListener(
 function (text) {
 console.log('inputEntered: '   text);
 alert('You just typed "'   text   '"');
 }
);

大量材料参照：

http://developer.chrome.com/extensions/omnibox.html

4.常常见到许多 chrome软件都是有可配备项，比如refer_control如何保证的呢？实际效果如下图：

manifest.json中配备项以下

{
 ...
 "manifest_version": 2,
 "options_page":"options.html"
}

options.html即是配备项，随意配备就可以（留意html中不可以有内联js）

对于options.html中配备项与软件的通讯能够根据localstorage来处理

5.遮盖现有的网页页面,实际效果如下图

编码以下：

"chrome_url_overrides" : {
 "pageToOverride": "myPage.html"
}

应用:bookmarks/history/newtab更换pageToOverride

一个软件中只有更换所述三种网页页面中的一个。

常见问题：

期待文中能协助到您！

关注分享，让大量的人也可以见到这篇內容（个人收藏不关注，全是耍无赖-_-）

关心｛我｝，享有文章内容先发感受！

每星期关键攻破一个前端技术难题。更多精彩前端开发內容私聊我回应“实例教程”

全文连接：http://eux.baidu.com/blog/fe/customize-your-chrome-plug-in

创作者：sucer