From 42a6cacdf949edbcb95995be64cf9545dabe34e4 Mon Sep 17 00:00:00 2001 From: kerbalwzy Date: Thu, 20 May 2021 17:01:26 +0800 Subject: [PATCH 1/3] Update: add the message transport example --- README.md | 18 ++++++ examples/message-transport/background.js | 80 ++++++++++++++++++++++++ examples/message-transport/content.js | 25 ++++++++ examples/message-transport/custom.html | 17 +++++ examples/message-transport/custom.js | 32 ++++++++++ examples/message-transport/manifest.json | 18 ++++++ examples/message-transport/popup.html | 12 ++++ examples/message-transport/popup.js | 42 +++++++++++++ 8 files changed, 244 insertions(+) create mode 100644 examples/message-transport/background.js create mode 100644 examples/message-transport/content.js create mode 100644 examples/message-transport/custom.html create mode 100644 examples/message-transport/custom.js create mode 100644 examples/message-transport/manifest.json create mode 100644 examples/message-transport/popup.html create mode 100644 examples/message-transport/popup.js diff --git a/README.md b/README.md index 581c2dccaf..e9f9244faf 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,24 @@ Read more on [Getting Started](https://developer.chrome.com/extensions/getstarte + + + My Bookmarks
+ examples/message-transport + + + + + Cookie Clearer
diff --git a/examples/message-transport/background.js b/examples/message-transport/background.js new file mode 100644 index 0000000000..c7894fe907 --- /dev/null +++ b/examples/message-transport/background.js @@ -0,0 +1,80 @@ +// https://developer.chrome.com/docs/extensions/reference/runtime/#property-id +var myExstensionId = chrome.runtime.id; +console.log("My Exstension Id is", myExstensionId); + + +chrome.runtime.onMessage.addListener( + /* https://developer.chrome.com/docs/extensions/reference/runtime/#event-onMessage + * Notice: 'message.recipient' is self-defined + */ + function(message, sender, sendResponse) { + if (sender.id === myExstensionId && message.recipient === 'background') { + console.log(message) + resp = { + data: "message back from background\n" + new Date(), + } + if (sender.tab) { + resp.yourTabId = sender.tab.id; + } + sendResponse(resp); + } + } +); + + +function SendMessageToPopup(msg) { + /* https://developer.chrome.com/docs/extensions/reference/runtime/#method-sendMessage + * You can call this function with console at DevTools of Service Worker. + * Make sure you have opened the popup page of this exstension before call this function + */ + chrome.runtime.sendMessage({ + data: msg, + recipient: "popup", + }, function(resp) { + console.log(resp) + }); +} + + +async function SendMessageToCustom(msg) { + /* https://developer.chrome.com/docs/extensions/reference/tabs/#method-query + * https://developer.chrome.com/docs/extensions/reference/tabs/#method-sendMessage + * Make sure you have opened the custom page + */ + let customTabs = await chrome.tabs.query({ + url: chrome.runtime.getURL("custom.html") + }); + if (customTabs.length == 0) { + console.log("Make sure you have opened the custom page"); + return + } + let targetTab = customTabs[0]; + chrome.tabs.sendMessage( + targetTab.id, { + recipient: "custom", + data: msg + }, {}, + function(resp) { + console.log(resp); + } + ); +} + + +function SendMessageToContent(tabId, msg) { + /* https://developer.chrome.com/docs/extensions/reference/tabs/#method-get; + * https://developer.chrome.com/docs/extensions/reference/tabs/#method-sendMessage + * Make sure your content script has loaded in the target tab page + */ + chrome.tabs.get(tabId).then(function(tab) { + chrome.tabs.sendMessage( + tabId, { + recipient: "content", + data: msg + }, {}, + function(resp) { + console.log(resp) + } + ); + }); +} diff --git a/examples/message-transport/content.js b/examples/message-transport/content.js new file mode 100644 index 0000000000..dab2bd2e2c --- /dev/null +++ b/examples/message-transport/content.js @@ -0,0 +1,25 @@ +// https://developer.chrome.com/docs/extensions/reference/runtime/#property-id +var myExstensionId = chrome.runtime.id; + + +// https://developer.chrome.com/docs/extensions/reference/runtime/#method-sendMessage +chrome.runtime.sendMessage(myExstensionId, { + recipient: "background" +}, function(resp) { + console.log(resp) +}) + + +/* https://developer.chrome.com/docs/extensions/reference/runtime/#event-onMessage + * Notice: 'message.recipient' is self-defined + */ +chrome.runtime.onMessage.addListener( + function(message, sender, sendResponse) { + if (sender.id === myExstensionId && message.recipient === 'content') { + alert(JSON.stringify(message)) + sendResponse({ + data: "message back from content script\n" + new Date() + }) + } + } +); diff --git a/examples/message-transport/custom.html b/examples/message-transport/custom.html new file mode 100644 index 0000000000..9b38b073ed --- /dev/null +++ b/examples/message-transport/custom.html @@ -0,0 +1,17 @@ + + + + + Exstension Custon Page + + +

This is a cutsom page with the exstension

+ +

+

messages from background:

+ +

+ + + diff --git a/examples/message-transport/custom.js b/examples/message-transport/custom.js new file mode 100644 index 0000000000..d1fc5df911 --- /dev/null +++ b/examples/message-transport/custom.js @@ -0,0 +1,32 @@ +// https://developer.chrome.com/docs/extensions/reference/runtime/#property-id +var myExstensionId = chrome.runtime.id; + + +var btn1Ele = document.getElementById('btn1'); +btn1Ele.onclick = function() { + // https://developer.chrome.com/docs/extensions/reference/runtime/#method-sendMessage + chrome.runtime.sendMessage(myExstensionId, { + data: "message send by custom page", + recipient: "background", + }, function(resp) { + alert(resp.data) + }) +} + + +var msgBoxEle = document.getElementById('msg-box'); +chrome.runtime.onMessage.addListener( + function(message, sender, sendResponse) { + /* https://developer.chrome.com/docs/extensions/reference/runtime/#event-onMessage + * Notice: 'message.recipient' is self-defined + */ + if (sender.id === myExstensionId && message.recipient === 'custom') { + let msgliEle = document.createElement('li'); + msgliEle.innerText = new Date() + " : " + message.data; + msgBoxEle.appendChild(msgliEle); + sendResponse({ + data: "message back from custom page\n" + new Date() + }) + } + } +); diff --git a/examples/message-transport/manifest.json b/examples/message-transport/manifest.json new file mode 100644 index 0000000000..998b47e419 --- /dev/null +++ b/examples/message-transport/manifest.json @@ -0,0 +1,18 @@ +{ + "name": "Message Transport", + "version": "1.0", + "manifest_version": 3, + "permissions": ["scripting", "tabs"], + "action": { + "default_title": "Message Transport", + "default_popup": "popup.html" + }, + "background": { + "service_worker": "background.js" + }, + "content_scripts": [{ + "matches": [""], + "js": ["content.js"], + "run_at": "document_end" + }] +} diff --git a/examples/message-transport/popup.html b/examples/message-transport/popup.html new file mode 100644 index 0000000000..30d83f3b04 --- /dev/null +++ b/examples/message-transport/popup.html @@ -0,0 +1,12 @@ + + + + + + + +
+ PS: The custom page with our exstension + + + diff --git a/examples/message-transport/popup.js b/examples/message-transport/popup.js new file mode 100644 index 0000000000..9c869c7d65 --- /dev/null +++ b/examples/message-transport/popup.js @@ -0,0 +1,42 @@ +// https://developer.chrome.com/docs/extensions/reference/runtime/#property-id +var myExstensionId = chrome.runtime.id; + + +var btn1Ele = document.getElementById('btn1'); +btn1Ele.onclick = function() { + // https://developer.chrome.com/docs/extensions/reference/runtime/#method-sendMessage + chrome.runtime.sendMessage(myExstensionId, { + data: "message send by popup", + recipient: "background", + }, function(resp) { + alert(resp.data) + }) +} + + +chrome.runtime.onMessage.addListener( + function(message, sender, sendResponse) { + /* https://developer.chrome.com/docs/extensions/reference/runtime/#event-onMessage + * Notice: 'message.recipient' is self-defined + */ + if (sender.id === myExstensionId && message.recipient === 'popup') { + alert(JSON.stringify(message)) + sendResponse({ + data: "message back from popup\n" + new Date() + }) + } + } +); + + +/* https://developer.chrome.com/docs/extensions/reference/tabs/#method-create + * Open a new tab with our custom page in the exstension + */ +var btn2Ele = document.getElementById('btn2'); +btn2Ele.onclick = async function() { + // + let url = chrome.runtime.getURL("custom.html") + let tab = await chrome.tabs.create({ + url + }); +} From 34c6729b902df4f874e097d3452fc49cc9cc1972 Mon Sep 17 00:00:00 2001 From: kerbalwzy Date: Thu, 20 May 2021 17:02:55 +0800 Subject: [PATCH 2/3] Fix: make the new example name right --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e9f9244faf..07d8167feb 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,7 @@ Read more on [Getting Started](https://developer.chrome.com/extensions/getstarte - My Bookmarks
+ Message Transport
examples/message-transport From b8ee77c144261c16ca05d1b92817422bc29bd344 Mon Sep 17 00:00:00 2001 From: kerbalwzy Date: Thu, 20 May 2021 18:10:59 +0800 Subject: [PATCH 3/3] Fix: add the note(doc link), remove useless variable declaration --- examples/message-transport/popup.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/message-transport/popup.js b/examples/message-transport/popup.js index 9c869c7d65..041f8d41b0 100644 --- a/examples/message-transport/popup.js +++ b/examples/message-transport/popup.js @@ -34,9 +34,9 @@ chrome.runtime.onMessage.addListener( */ var btn2Ele = document.getElementById('btn2'); btn2Ele.onclick = async function() { - // + // https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL let url = chrome.runtime.getURL("custom.html") - let tab = await chrome.tabs.create({ + chrome.tabs.create({ url }); }