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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1554183153346
+
+
+ 1554183153346
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/full-chrome-plugin-demo/js/background.js b/full-chrome-plugin-demo/js/background.js
index 014f387..8f893e1 100644
--- a/full-chrome-plugin-demo/js/background.js
+++ b/full-chrome-plugin-demo/js/background.js
@@ -1,3 +1,5 @@
+// 后台常驻
+
//-------------------- 右键菜单演示 ------------------------//
chrome.contextMenus.create({
title: "测试右键菜单",
@@ -48,6 +50,23 @@ chrome.contextMenus.create({
});
})();*/
+
+$('#test_cors').click((e) => {
+ $.get('https://www.baidu.com', function(html){
+ console.log( html);
+ alert('跨域调用成功!');
+ });
+});
+
+$('#get_popup_title').click(e => {
+ var views = chrome.extension.getViews({type:'popup'});
+ if(views.length > 0) {
+ alert(views[0].document.title);
+ } else {
+ alert('popup未打开!');
+ }
+});
+
// 监听来自content-script的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
@@ -56,22 +75,6 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
sendResponse('我是后台,我已收到你的消息:' + JSON.stringify(request));
});
-$('#test_cors').click((e) => {
- $.get('https://www.baidu.com', function(html){
- console.log( html);
- alert('跨域调用成功!');
- });
-});
-
-$('#get_popup_title').click(e => {
- var views = chrome.extension.getViews({type:'popup'});
- if(views.length > 0) {
- alert(views[0].document.title);
- } else {
- alert('popup未打开!');
- }
-});
-
// 获取当前选项卡ID
function getCurrentTabId(callback)
{
diff --git a/full-chrome-plugin-demo/js/content-script.js b/full-chrome-plugin-demo/js/content-script.js
index 1b1e683..9cea645 100644
--- a/full-chrome-plugin-demo/js/content-script.js
+++ b/full-chrome-plugin-demo/js/content-script.js
@@ -1,4 +1,7 @@
-console.log('这是content script!');
+// 向H5页面注入JS 或者 css;
+// content-scripts和原始页面共享DOM,但是不共享JS,如要访问页面JS(例如某个JS变量),只能通过injected js来实现
+
+console.log('这是content script!');
// 注意,必须设置了run_at=document_start 此段代码才会生效
document.addEventListener('DOMContentLoaded', function()
@@ -56,6 +59,22 @@ document.addEventListener('DOMContentLoaded', function()
}
});
+// 向页面注入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 initCustomPanel()
{
var panel = document.createElement('div');
@@ -63,9 +82,9 @@ function initCustomPanel()
panel.innerHTML = `
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});
+ });
}