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
- bookmarks:便签网页页面,在chrome中键入chrome://bookmarks/ 开启
- history:历史时间浏览纪录网页页面,在chrome中键入chrome://chrome/history/开启
- newtab:html页面,在chrome中在建网页页面时呈现,或是键入chrome://chrome/newtab/
一个软件中只有更换所述三种网页页面中的一个。
常见问题:
- html页面最好是小而快,客户常常期待立刻开启网页页面
- html页面中药材加上title,比如
- html页面不必有聚焦点,当在建对话框时,客户通常期待聚焦点在地址栏
- 不必效仿默认设置的在建页
期待文中能协助到您!
关注 分享,让大量的人也可以见到这篇內容(个人收藏不关注,全是耍无赖-_-)
关心 {我},享有文章内容先发感受!
每星期关键攻破一个前端技术难题。更多精彩前端开发內容私聊 我 回应“实例教程”
全文连接:http://eux.baidu.com/blog/fe/customize-your-chrome-plug-in
创作者:sucer