chrome插件安装学习

地址：http://blog.haoji.me/chrome-plugin-develop.html#guan-fang-zi-liao

想根据上述链接的老哥的demo顺着理解下....

我的工作任务是或者我的博客中我的所有发博文章保存到文件中....

这是学习的第一步....顺着demo "full-chrome-plugin-demo" 深挖 希望自己这周能完成

刚开始看到的是这个

 

顺着这个仔细研究

---

 

1.打开background

文中的代码是

<a href="#" id="open_background">打开background</a>

href = "#" 当前页面

// 打开后台页
$('#open_background').click(e => {
    window.open(chrome.extension.getURL('background.html'));
});

 

 

 

 

 

 

 跨域演示是获取百度页面的代码在控制台输出

---

2.调用background页JS方法

 

 

 

 

---

3.获取background页的标题

---

4.设置background页标题

---

 

5.新窗口打开百度

 

打开后是这个页面不是很理解 找了下发现

 

 

 ok....chrome_url_overrides -> 里面的newtab被覆盖了

---

6.执行简单的窗口动画

 

 

 

//这个有问题没有显示出来 应该是代码哪里写错了？

---

7.将当前窗口最大化

 

 

 

---

8.将当前窗口最小化

 

 

 

---

9.关闭当前窗口所有标签(慎点)

---

10.新标签打开百度

---

11.当前标签打开网页

 

 

 

---

 

12.获取当前标签页ID

---

 

13.切换到第一个标签

---

 

14.短连接发送消息到content-script

popup 发送消息给content-script   所以content-script要时刻监听着

 

 

 

 

 

---

 

15.长连接发送消息到content-script

 

 

 

 

 

 

---

 

16.修改页面背景色(通过executeScript实现)

---

17.修改字体大小(通过sendMessage实现)

---

 

18.显示badge

 

 

 

 

---

 

19.隐藏badge

 

 

 

 

---

 

20.显示桌面通知

 

 

---

21.检测网页视频

 

 

---

22.百度广告，右键菜单，omnibox，图片大小演示，devtools演示，sidebar演示，

 

// 通过postMessage调用content-script
function invokeContentScript(code)
{
    window.postMessage({cmd: 'invoke', code: code}, '*');
}
// 发送普通消息到content-script
function sendMessageToContentScriptByPostMessage(data)
{
    window.postMessage({cmd: 'message', data: data}, '*');
}

// 通过DOM事件发送消息给content-script
(function() {
    var customEvent = document.createEvent('Event');
    customEvent.initEvent('myCustomEvent', true, true);
    // 通过事件发送消息给content-script
    function sendMessageToContentScriptByEvent(data) {
        data = data || '你好，我是injected-script!';
        var hiddenDiv = document.getElementById('myCustomEventDiv');
        hiddenDiv.innerText = data
        hiddenDiv.dispatchEvent(customEvent);
    }
    window.sendMessageToContentScriptByEvent = sendMessageToContentScriptByEvent;
})();

---

 

        "contextMenus", // 右键菜单

       

 

chrome.contextMenus.create({
    title: "测试右键菜单",
    onclick: function(){
        chrome.notifications.create(null, {
            type: 'basic',
            iconUrl: 'img/icon.png',
            title: '这是标题',
            message: '您刚才点击了自定义右键菜单！'
        });
    }
});
chrome.contextMenus.create({
    title: '使用度娘搜索：%s', // %s表示选中的文字
    contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单
    onclick: function(params)
    {
        // 注意不能使用location.href，因为location是属于background的window对象
        chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
    }
});

---

 

 

 

 

    // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
    "omnibox": { "keyword" : "go" },
// omnibox 演示
chrome.omnibox.onInputChanged.addListener((text, suggest) => {
    console.log('inputChanged: ' + text);
    if(!text) return;
    if(text == '美女') {
        suggest([
            {content: '中国' + text, description: '你要找“中国美女”吗？'},
            {content: '日本' + text, description: '你要找“日本美女”吗？'},
            {content: '泰国' + text, description: '你要找“泰国美女或人妖”吗？'},
            {content: '韩国' + text, description: '你要找“韩国美女”吗？'}
        ]);
    }
    else if(text == '微博') {
        suggest([
            {content: '新浪' + text, description: '新浪' + text},
            {content: '腾讯' + text, description: '腾讯' + text},
            {content: '搜狐' + text, description: '搜索' + text},
        ]);
    }
    else {
        suggest([
            {content: '百度搜索 ' + text, description: '百度搜索 ' + text},
            {content: '谷歌搜索 ' + text, description: '谷歌搜索 ' + text},
        ]);
    }
});

// 当用户接收关键字建议时触发
chrome.omnibox.onInputEntered.addListener((text) => {
    console.log('inputEntered: ' + text);
    if(!text) return;
    var href = '';
    if(text.endsWith('美女')) href = 'http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=' + text;
    else if(text.startsWith('百度搜索')) href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text.replace('百度搜索 ', '');
    else if(text.startsWith('谷歌搜索')) href = 'https://www.google.com.tw/search?q=' + text.replace('谷歌搜索 ', '');
    else href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text;
    openUrlCurrentTab(href);
});

 

---