Update: add a new example for message transport

README.md

@@ -68,6 +68,24 @@ Read more on [Getting Started](https://developer.chrome.com/extensions/getstarte
         </ul>
       </td>
     </tr>
+	<tr>
+	  <td style="vertical-align:top;">
+	     Message Transport<br>
+	    <a href="examples/bookmarks"><code>examples/message-transport</code></a>
+	  </td>
+	  <td  style="vertical-align:top;">
+	    <ul>
+	      <li><a href="https://developer.chrome.com/docs/extensions/reference/runtime/#property-id">runtime.id</a></li>
+		  <li><a href="https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL">runtime.getURL</a></li>
+	      <li><a href="https://developer.chrome.com/docs/extensions/reference/runtime/#event-onMessage">runtime.onMessage</a></li>
+	      <li><a href="https://developer.chrome.com/docs/extensions/reference/runtime/#method-sendMessage">runtime.sendMessage</a></li>
+		  <li><a href="https://developer.chrome.com/docs/extensions/reference/tabs/#method-create">tabs.create</a></li>
+		  <li><a href="https://developer.chrome.com/docs/extensions/reference/tabs/#method-get">tabs.get</a></li>
+	      <li><a href="https://developer.chrome.com/docs/extensions/reference/tabs/#method-query">tabs.query</a></li>
+	      <li><a href="https://developer.chrome.com/docs/extensions/reference/tabs/#method-sendMessage">tabs.sendMessage</a></li>
+	    </ul>
+	  </td>
+	</tr>
     <tr>
       <td style="vertical-align:top;">
         Cookie Clearer <br>

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)
+			}
+		);
+	});
+}

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()
+			})
+		}
+	}
+);

examples/message-transport/custom.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Exstension Custon Page</title>
+	</head>
+	<body>
+		<h1>This is a cutsom page with the exstension</h1>
+		<button type="button" id="btn1">Send Message To Background</button>
+		<p>
+		<h3>messages from background:</h3>
+		<ul id="msg-box">
+		</ul>
+		</p>
+	</body>
+	<script src="custom.js" type="text/javascript" charset="utf-8"></script>
+</html>

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()
+			})
+		}
+	}
+);

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": ["<all_urls>"],
+		"js": ["content.js"],
+		"run_at": "document_end"
+	}]
+}

examples/message-transport/popup.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+	</head>
+	<body style="width: 600px;">
+		<button type="button" id="btn1">Send Message To Background</button>
+		<hr>
+		<button type="button" id="btn2">Open Custom Page</button> PS: The custom page with our exstension
+	</body>
+	<script src="popup.js" type="text/javascript"></script>
+</html>

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
+	});
+}