From 669babe5fd8916b6db81414fc73ae1117e708516 Mon Sep 17 00:00:00 2001 From: xiananliu Date: Fri, 16 Jun 2017 18:54:57 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/devtools.html | 20 ++------------- demo/devtools.js | 8 ------ demo/js/background.js | 51 ++++++++++++++++++++++++++++-------- demo/js/content-script.js | 29 +++++++++++++++++++++ demo/js/devtools.js | 14 ++++++++++ demo/js/mypanel.js | 54 +++++++++++++++++++++++++++++++++++++++ demo/manifest.json | 13 ++++++++-- demo/mypanel.html | 38 +++++++++++++++++++++++++++ demo/newtab.html | 1 + demo/popup.html | 15 +++++++---- demo/sidebar.html | 23 +++++++++++++++++ 11 files changed, 222 insertions(+), 44 deletions(-) delete mode 100644 demo/devtools.js create mode 100644 demo/js/devtools.js create mode 100644 demo/js/mypanel.js create mode 100644 demo/mypanel.html create mode 100644 demo/sidebar.html diff --git a/demo/devtools.html b/demo/devtools.html index bd3226d..ad2f9a4 100644 --- a/demo/devtools.html +++ b/demo/devtools.html @@ -1,23 +1,7 @@ - - 新标签页 - - - + -

这是一个自定义的新标签页

- + \ No newline at end of file diff --git a/demo/devtools.js b/demo/devtools.js deleted file mode 100644 index 72f6540..0000000 --- a/demo/devtools.js +++ /dev/null @@ -1,8 +0,0 @@ - -chrome.devtools.panels.create("My Panel", - "MyPanelIcon.png", - "devtools.html", - function(panel) { - console.log(222); - } -); \ No newline at end of file diff --git a/demo/js/background.js b/demo/js/background.js index f169122..fc4c15d 100644 --- a/demo/js/background.js +++ b/demo/js/background.js @@ -1,4 +1,4 @@ -// 右键菜单演示 +//-------------------- 右键菜单演示 ------------------------// chrome.contextMenus.create({ title: "测试右键菜单", onclick: function(){ @@ -19,14 +19,43 @@ chrome.contextMenus.create({ chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)}); } }); - -// badge 演示 -// chrome.browserAction.setBadgeText({text: 'new'}); -// chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]}); - -chrome.tabs.onCreated.addListener(function(activeInfo) -{ - //alert(activeInfo.tabId) - console.log(activeInfo); - chrome.pageAction.show(activeInfo.tabId); +chrome.contextMenus.create({ + title: "获取当前页面tabId", + onclick: function() { + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) + { + alert('当前tabId：' + (tabs.length ? tabs[0].id : '未知')); + }); + } }); + + + + +//-------------------- badge演示 ------------------------// +(function() +{ + var showBadge = false; + var menuId = chrome.contextMenus.create({ + title: '显示图标上的Badge', + type: 'checkbox', + checked: false, + onclick: function() { + if(!showBadge) + { + chrome.browserAction.setBadgeText({text: 'New'}); + chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]}); + chrome.contextMenus.update(menuId, {title: '隐藏图标上的Badge', checked: true}); + } + else + { + chrome.browserAction.setBadgeText({text: ''}); + chrome.browserAction.setBadgeBackgroundColor({color: [0, 0, 0, 0]}); + chrome.contextMenus.update(menuId, {title: '显示图标上的Badge', checked: false}); + } + showBadge = !showBadge; + } + }); +})(); + + diff --git a/demo/js/content-script.js b/demo/js/content-script.js index b11a2f3..0953148 100644 --- a/demo/js/content-script.js +++ b/demo/js/content-script.js @@ -1,5 +1,6 @@ console.log('这是content script!'); +// 注意，必须设置了run_at=document_start 此段代码才会生效 document.addEventListener('DOMContentLoaded', function() { // 给谷歌搜索结果的超链接增加 _target="blank" @@ -12,5 +13,33 @@ document.addEventListener('DOMContentLoaded', function() } console.log('已处理谷歌超链接！'); } + else if(location.host == 'www.baidu.com') + { + function fuckBaiduAD() + { + var temp = document.createElement('style'); + temp.id = 'my_custom_css'; + (document.head || document.body).appendChild(temp); + var css = ` + /* 移除百度右侧广告 */ + #content_right{display:none;} + [data-click] [data-tuiguang]{display:none;} + /* 覆盖整个屏幕的相关推荐 */ + .rrecom-btn-parent{display:none;}' + /* 难看的按钮 */ + .result-op{display:none !important;}`; + temp.innerHTML = css; + console.log('已注入自定义CSS！'); + // 屏蔽百度推广信息 + $('[data-tuiguang]').parents('[data-click]').remove(); + // 重新搜索时页面不会刷新，但是被注入的style会被移除，所以需要重新执行 + temp.addEventListener('DOMNodeRemoved', function(e) + { + console.log('自定义CSS被移除，重新注入！'); + fuckBaiduAD(); + }); + } + fuckBaiduAD(); + } }); diff --git a/demo/js/devtools.js b/demo/js/devtools.js new file mode 100644 index 0000000..ddbf167 --- /dev/null +++ b/demo/js/devtools.js @@ -0,0 +1,14 @@ +// 创建自定义面板，同一个插件可以创建多个自定义面板 +// 几个参数依次为：panel标题、图标（其实设置了也没地方显示）、要加载的页面、加载成功后的回调 +chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel) +{ + console.log('自定义面板创建成功！'); // 注意这个log一般看不到 +}); + +// 创建自定义侧边栏 +chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar) +{ + // sidebar.setPage('../sidebar.html'); // 指定加载某个页面 + sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 通过表达式来指定 + //sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接设置显示某个对象 +}); \ No newline at end of file diff --git a/demo/js/mypanel.js b/demo/js/mypanel.js new file mode 100644 index 0000000..3b35a31 --- /dev/null +++ b/demo/js/mypanel.js @@ -0,0 +1,54 @@ +// 检测jQuery +document.getElementById('check_jquery').addEventListener('click', function() +{ + // 访问被检查的页面DOM需要使用inspectedWindow + // 简单例子：检测被检查页面是否使用了jQuery + chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function(result, isException) + { + var html = ''; + if (isException) html = '当前页面没有使用jQuery。'; + else html = '当前页面使用了jQuery，版本为：'+result; + alert(html); + }); +}); + +// 打开某个资源 +document.getElementById('open_resource').addEventListener('click', function() +{ + chrome.devtools.inspectedWindow.eval("window.location.href", function(result, isException) + { + chrome.devtools.panels.openResource(result, 20, function() + { + console.log('资源打开成功！'); + }); + }); +}); + +// 审查元素 +document.getElementById('test_inspect').addEventListener('click', function() +{ + chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){}); +}); + +// 获取所有资源 +document.getElementById('get_all_resources').addEventListener('click', function() +{ + chrome.devtools.inspectedWindow.getResources(function(resources) + { + alert(JSON.stringify(resources)); + }); +}); + +var myconsole = +{ + _log: function(obj) + { + // 不知为何，这种方式不行 + chrome.devtools.inspectedWindow('console.log('+JSON.stringify(obj)+')'); + }, + log: function(obj) + { + // 这里有待完善 + chrome.tabs.executeScript(chrome.devtools.inspectedWindow.tabId, {code: 'console.log(' + JSON.stringify(obj) + ')'}, function(){}); + } +}; diff --git a/demo/manifest.json b/demo/manifest.json index 2e2c240..8a25c06 100644 --- a/demo/manifest.json +++ b/demo/manifest.json @@ -23,6 +23,7 @@ "browser_action": { "default_icon": "img/icon.png", + // 图标悬停时的标题，可选 "default_title": "这是一个示例Chrome插件", "default_popup": "popup.html" }, @@ -38,7 +39,10 @@ [ { "matches": ["http://*/*", "https://*/*"], - "js": ["js/content-script.js"] + "js": ["js/jquery-1.8.3.js", "js/content-script.js"], + "css": [], + // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle + "run_at": "document_start" } ], // 权限申请 @@ -46,13 +50,18 @@ [ "contextMenus", // 右键菜单 "tabs", // 标签 - "notifications" + "notifications", // 通知 + "http://*/*", // 可以通过executeScript或者insertCSS访问的网站 + "https://*/*" // 可以通过executeScript或者insertCSS访问的网站 ], // 插件主页，这个很重要，不要浪费了这个免费广告位 "homepage_url": "https://www.baidu.com", + // 覆盖浏览器默认页面 "chrome_url_overrides": { + // 覆盖浏览器默认的新标签页 "newtab": "newtab.html" }, + // devtools页面入口，注意只能指向一个HTML文件，不能是JS文件 "devtools_page": "devtools.html" } \ No newline at end of file diff --git a/demo/mypanel.html b/demo/mypanel.html new file mode 100644 index 0000000..4e98d6c --- /dev/null +++ b/demo/mypanel.html @@ -0,0 +1,38 @@ + + + + 新标签页 + + + + +

这是一个自定义Chrome开发者工具页面

+
+
检测当前页面jQuery
+
查看当前页面HTML代码的第20行
+
审查当前页面第一张图片
+
获取当前页面所有Resources
+
+ + + \ No newline at end of file diff --git a/demo/newtab.html b/demo/newtab.html index 4759b09..0c174fe 100644 --- a/demo/newtab.html +++ b/demo/newtab.html @@ -2,6 +2,7 @@ 新标签页 + + + +

这是一个popup页面！

- - -

这是一个popup页面！

\ No newline at end of file diff --git a/demo/sidebar.html b/demo/sidebar.html new file mode 100644 index 0000000..38740a2 --- /dev/null +++ b/demo/sidebar.html @@ -0,0 +1,23 @@ + + + + 侧边栏 + + + + +

这是一个自定义侧边栏

+ + \ No newline at end of file