Cookie Clearer
diff --git a/examples/message-transport/background.js b/examples/message-transport/background.js
new file mode 100644
index 000000000..c7894fe90
--- /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 000000000..dab2bd2e2
--- /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 000000000..9b38b073e
--- /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 000000000..d1fc5df91
--- /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 000000000..998b47e41
--- /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 000000000..30d83f3b0
--- /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 000000000..041f8d41b
--- /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() {
+ // https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL
+ let url = chrome.runtime.getURL("custom.html")
+ chrome.tabs.create({
+ url
+ });
+}
|