From 3ff6a41be8e25d88ffd51623d5ac041e99c9d233 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E9=B9=8F?= <64hp@163.com>
Date: Wed, 3 Apr 2019 10:15:31 +0800
Subject: [PATCH] update
---
.../.idea/full-chrome-plugin-demo.iml | 12 +
full-chrome-plugin-demo/.idea/modules.xml | 8 +
.../.idea/watcherTasks.xml | 4 +
full-chrome-plugin-demo/.idea/workspace.xml | 460 ++++++++++++++++++
full-chrome-plugin-demo/js/background.js | 35 +-
full-chrome-plugin-demo/js/content-script.js | 88 ++--
full-chrome-plugin-demo/js/devtools.js | 2 +-
full-chrome-plugin-demo/js/inject.js | 3 +
full-chrome-plugin-demo/js/popup.js | 44 +-
9 files changed, 589 insertions(+), 67 deletions(-)
create mode 100644 full-chrome-plugin-demo/.idea/full-chrome-plugin-demo.iml
create mode 100644 full-chrome-plugin-demo/.idea/modules.xml
create mode 100644 full-chrome-plugin-demo/.idea/watcherTasks.xml
create mode 100644 full-chrome-plugin-demo/.idea/workspace.xml
diff --git a/full-chrome-plugin-demo/.idea/full-chrome-plugin-demo.iml b/full-chrome-plugin-demo/.idea/full-chrome-plugin-demo.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/full-chrome-plugin-demo/.idea/full-chrome-plugin-demo.iml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/full-chrome-plugin-demo/.idea/modules.xml b/full-chrome-plugin-demo/.idea/modules.xml
new file mode 100644
index 0000000..cf1a145
--- /dev/null
+++ b/full-chrome-plugin-demo/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/full-chrome-plugin-demo/.idea/watcherTasks.xml b/full-chrome-plugin-demo/.idea/watcherTasks.xml
new file mode 100644
index 0000000..9338ba6
--- /dev/null
+++ b/full-chrome-plugin-demo/.idea/watcherTasks.xml
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/full-chrome-plugin-demo/.idea/workspace.xml b/full-chrome-plugin-demo/.idea/workspace.xml
new file mode 100644
index 0000000..551a193
--- /dev/null
+++ b/full-chrome-plugin-demo/.idea/workspace.xml
@@ -0,0 +1,460 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ sendMessage
+ chrome.tabs.sendMessage
+ chrome.tabs.executeScript
+ permissions
+ testBackground
+ open_background
+ _window
+ custom_window_size
+ getCurrentTabId
+ 你好，我是popup
+ 我是后台，我已收到你的消息
+ executeScriptToCurrentTab
+ chrome.runtime.onMessage.addListener
+ sendMessageToContentScript
+ my_custom_css
+ highlight_tab
+ custom.css
+ injectCustomJs
+ myCustomEvent
+ myCustomEventDiv
+ initCustomEventListen
+ my_custom_log
+ sendMessageToContentScriptByEvent
+ sendMessageToContentScriptByPostMessage
+ 收到来自content-script的消息
+ custom
+ myconsole
+ sendMessageToBackground
+ invokeContentScript
+ postMessage
+
+
+
+
+
+
+
+
+ true
+
+ false
+ true
+ true
+
+
+ true
+ DEFINITION_ORDER
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ injected-script操作content-script演示区：
@@ -73,22 +92,35 @@ function initCustomPanel()
document.body.appendChild(panel);
}
-// 向页面注入JS
-function injectCustomJs(jsPath)
-{
- jsPath = jsPath || 'js/inject.js';
- var temp = document.createElement('script');
- temp.setAttribute('type', 'text/javascript');
- // 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
- temp.src = chrome.extension.getURL(jsPath);
- temp.onload = function()
- {
- // 放在页面不好看，执行完后移除掉
- this.parentNode.removeChild(this);
- };
- document.body.appendChild(temp);
+
+function initCustomEventListen() {
+ var hiddenDiv = document.getElementById('myCustomEventDiv');
+ if(!hiddenDiv) {
+ hiddenDiv = document.createElement('div');
+ hiddenDiv.style.display = 'none';
+ hiddenDiv.id = 'myCustomEventDiv';
+ document.body.appendChild(hiddenDiv);
+ }
+ hiddenDiv.addEventListener('myCustomEvent', function() {
+ var eventData = document.getElementById('myCustomEventDiv').innerText;
+ tip('收到自定义事件：' + eventData);
+ });
}
+
+window.addEventListener("message", function(e)
+{
+ console.log('收到消息：', e.data);
+ if(e.data && e.data.cmd == 'invoke') {
+ eval('('+e.data.code+')');
+ }
+ else if(e.data && e.data.cmd == 'message') {
+ tip(e.data.data);
+ }
+}, false);
+
+
+
// 接收来自后台的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
@@ -124,32 +156,8 @@ chrome.runtime.onConnect.addListener(function(port) {
}
});
-window.addEventListener("message", function(e)
-{
- console.log('收到消息：', e.data);
- if(e.data && e.data.cmd == 'invoke') {
- eval('('+e.data.code+')');
- }
- else if(e.data && e.data.cmd == 'message') {
- tip(e.data.data);
- }
-}, false);
-function initCustomEventListen() {
- var hiddenDiv = document.getElementById('myCustomEventDiv');
- if(!hiddenDiv) {
- hiddenDiv = document.createElement('div');
- hiddenDiv.style.display = 'none';
- hiddenDiv.id = 'myCustomEventDiv';
- document.body.appendChild(hiddenDiv);
- }
- hiddenDiv.addEventListener('myCustomEvent', function() {
- var eventData = document.getElementById('myCustomEventDiv').innerText;
- tip('收到自定义事件：' + eventData);
- });
-}
-
var tipCount = 0;
// 简单的消息通知
function tip(info) {
diff --git a/full-chrome-plugin-demo/js/devtools.js b/full-chrome-plugin-demo/js/devtools.js
index ddbf167..edb81b5 100644
--- a/full-chrome-plugin-demo/js/devtools.js
+++ b/full-chrome-plugin-demo/js/devtools.js
@@ -2,7 +2,7 @@
// 几个参数依次为：panel标题、图标（其实设置了也没地方显示）、要加载的页面、加载成功后的回调
chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel)
{
- console.log('自定义面板创建成功！'); // 注意这个log一般看不到
+ console.log('自定义面板创建成功！22222222222222'); // 注意这个log一般看不到
});
// 创建自定义侧边栏
diff --git a/full-chrome-plugin-demo/js/inject.js b/full-chrome-plugin-demo/js/inject.js
index 1690158..685b90b 100644
--- a/full-chrome-plugin-demo/js/inject.js
+++ b/full-chrome-plugin-demo/js/inject.js
@@ -1,4 +1,7 @@
+// 调用页面JS, 访问JS变量
+
// 通过postMessage调用content-script
+
function invokeContentScript(code)
{
window.postMessage({cmd: 'invoke', code: code}, '*');
diff --git a/full-chrome-plugin-demo/js/popup.js b/full-chrome-plugin-demo/js/popup.js
index a767130..bc91a68 100644
--- a/full-chrome-plugin-demo/js/popup.js
+++ b/full-chrome-plugin-demo/js/popup.js
@@ -12,6 +12,8 @@ $(function() {
});
+
+
// 打开后台页
$('#open_background').click(e => {
window.open(chrome.extension.getURL('background.html'));
@@ -37,7 +39,16 @@ $('#set_background_title').click(e => {
alert('修改成功！');
});
-// 自定义窗体大小
+
+/*- - 窗口操作 - - */
+
+// 打开新窗口
+$('#open_new_window').click(() => {
+ chrome.windows.create({state: 'maximized'});
+});
+
+
+// 窗口动画
$('#custom_window_size').click(() => {
chrome.windows.getCurrent({}, (currentWindow) => {
var startLeft = 10;
@@ -72,10 +83,7 @@ $('#min_current_window').click(() => {
});
});
-// 打开新窗口
-$('#open_new_window').click(() => {
- chrome.windows.create({state: 'maximized'});
-});
+
// 关闭全部
$('#close_current_window').click(() => {
@@ -84,6 +92,11 @@ $('#close_current_window').click(() => {
});
});
+
+
+/* - - -- 标签操作- -- -- - */
+
+
// 新标签打开网页
$('#open_url_new_tab').click(() => {
chrome.tabs.create({url: 'https://www.baidu.com'});
@@ -103,11 +116,14 @@ $('#get_current_tab_id').click(() => {
});
});
-// 高亮tab
+// 切换到第一个标签
$('#highlight_tab').click(() => {
chrome.tabs.highlight({tabs: 0});
});
+
+/* - - -- - -- - - - - - - -- - - - - - - -- - - - - - - - - - */
+
// popup主动发消息给content-script
$('#send_message_to_content_script').click(() => {
sendMessageToContentScript('你好，我是popup！', (response) => {
@@ -123,6 +139,8 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
sendResponse('我是popup，我已收到你的消息：' + JSON.stringify(request));
});
+
+
// popup与content-script建立长连接
$('#connect_to_content_script').click(() => {
getCurrentTabId((tabId) => {
@@ -138,6 +156,11 @@ $('#connect_to_content_script').click(() => {
});
});
+
+
+
+/* - -- - - - - - - -- - - - func- - - -- - - - - - - - - - - - - -- - */
+
// 获取当前选项卡ID
function getCurrentTabId(callback)
{
@@ -171,13 +194,14 @@ function sendMessageToContentScript(message, callback)
});
}
+
// 向content-script注入JS片段
function executeScriptToCurrentTab(code)
{
- getCurrentTabId((tabId) =>
- {
- chrome.tabs.executeScript(tabId, {code: code});
- });
+ getCurrentTabId((tabId) =>
+ {
+ chrome.tabs.executeScript(tabId, {code: code});
+ });
}