网页截图功能回调函数传参为null问题使用变通方法解决；规范chrome.runtime.sendMessage与chrome.runtime.onMessage.addListener；TODO: 鼠标样式onMessage Listener

packages/shell-chrome/assets/html/pomodoro/assets/js/popup.js

@@ -84,6 +84,7 @@ function start() {
     chrome.runtime.sendMessage(
       {
         status: "start",
+        senderId: "pomo",
         content: {
           minutes,
           seconds,
@@ -108,6 +109,7 @@ function end() {
   chrome.runtime.sendMessage(
     {
       status: "paused",
+      senderId: "pomo",
     },
     (response) => {
       console.log(response);
@@ -135,6 +137,7 @@ function getTimer() {
         chrome.runtime.sendMessage(
           {
             status: "playend",
+            senderId: "pomo",
           },
           (response) => {
             console.log(response,"**************下面");
@@ -178,6 +181,7 @@ resetBtn.addEventListener("click", () => {
     chrome.runtime.sendMessage(
       {
         status: "reset",
+        senderId: "pomo",
       },
       (response) => {
         // console.log(response);
@@ -209,6 +213,7 @@ chrome.storage.sync.get("pomoData", ({ pomoData }) => {
   } else if (status === "init") {
     chrome.runtime.sendMessage({
       status: "init",
+      senderId: "pomo",
     });
     countdownTimer.innerHTML = "25:00";
   }else if(status === 'playend'){

packages/shell-chrome/assets/html/pomodoro/background.js

@@ -22,6 +22,12 @@ let array = ["minutes", "seconds", "pause", "countdownTimer", "pbutton"];
 let timer = null;
 
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  console.log(`进入 assets\html\pomodoro\background.js 中的onMessage Listener`)
+  if (message.senderId !== "pomo") {
+    // 抛给下一个Listener
+    sendResponse();
+  }
+
   const { status, content } = message;
 
   if (status === "start") {
@@ -78,6 +84,8 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     // audio.play();
   }
   sendResponse();
+  console.log(`离开 assets\html\pomodoro\background.js 中的onMessage Listener`)
+  return true;
 });
 
 // 番茄钟倒计时功能

packages/shell-chrome/assets/html/screenshot/background.js

@@ -37,7 +37,13 @@ function inject(tab) {
 var takeScreenshot = inject
 
 chrome.runtime.onMessage.addListener((req, sender, res) => {
+  console.log(`进入 assets\html\screenshot\background.js 中的onMessage Listener`)
+  if (req.senderId !== "screenshot") {
+    // 抛给下一个Listener
+    res();
+  }
   if (req.message === 'capture') {
+    console.log("capture开始")
     chrome.storage.sync.get((config) => {
       chrome.tabs.getSelected(null, (tab) => {
         chrome.tabs.captureVisibleTab(tab.windowId, { format: config.format }, (image) => {
@@ -46,7 +52,10 @@ chrome.runtime.onMessage.addListener((req, sender, res) => {
           crop(image, req.area, req.dpr, config.dpr, config.format, (cropped) => {
             // 裁剪后
             // console.log("cropped", cropped)
+            console.log("capture结束")
             res({ message: 'image', image: cropped })
+            // 回调有问题，参数么有传回去，使用以下变通方式直接转换为可下载的文件
+            var link = document.createElement('a'); link.download = "学生助手 屏幕截图 " + Date.now(); link.href = cropped; link.click();
           })
         })
       })
@@ -62,6 +71,7 @@ chrome.runtime.onMessage.addListener((req, sender, res) => {
       // chrome.browserAction.setBadgeText({tabId: sender.tab.id, text: ''})
     }
   }
+  console.log(`离开 assets\html\screenshot\background.js 中的onMessage Listener`)
   return true
 })
 

packages/shell-chrome/assets/html/screenshot/js/content.js

@@ -1,11 +1,11 @@
 
-var jcrop,selection
+var jcrop, selection
 var relativePath = 'assets/html/screenshot'
 
 var overlay = ((active) => (state) => {
   active = typeof state === 'boolean' ? state : state === null ? active : !active
   $('.jcrop-holder')[active ? 'show' : 'hide']()
-  chrome.runtime.sendMessage({message: 'active', active})
+  chrome.runtime.sendMessage({ message: 'active', senderId: "screenshot", active })
 })(false)
 
 var image = (done) => {
@@ -33,7 +33,7 @@ var init = (done) => {
         selection = null
       }, 100)
     }
-  }, function ready () {
+  }, function ready() {
     jcrop = this
 
     $('.jcrop-hline, .jcrop-vline').css({
@@ -53,13 +53,15 @@ var init = (done) => {
 
 var capture = (force) => {
   chrome.storage.sync.get((config) => {
+    console.log(config)
     if (selection && (config.method === 'crop' || (config.method === 'wait' && force))) {
       jcrop.release()
       setTimeout(() => {
+        console.log("准备capture")
         chrome.runtime.sendMessage({
-          message: 'capture', area: selection, dpr: devicePixelRatio
+          message: 'capture', senderId: "screenshot", area: selection, dpr: devicePixelRatio
         }, (res) => {
-          console.log("res: ", res)
+          console.log("capture回调结果：", res)
           overlay(false)
           selection = null
           save(res.image, config.format, config.save)
@@ -68,8 +70,8 @@ var capture = (force) => {
     }
     else if (config.method === 'view') {
       chrome.runtime.sendMessage({
-        message: 'capture',
-        area: {x: 0, y: 0, w: innerWidth, h: innerHeight}, dpr: devicePixelRatio
+        message: 'capture', senderId: "screenshot",
+        area: { x: 0, y: 0, w: innerWidth, h: innerHeight }, dpr: devicePixelRatio
       }, (res) => {
         overlay(false)
         save(res.image, config.format, config.save)
@@ -105,6 +107,11 @@ window.addEventListener('resize', ((timeout) => () => {
 })())
 
 chrome.runtime.onMessage.addListener((req, sender, res) => {
+  console.log(`进入 assets\html\screenshot\js\content.js 中的onMessage Listener`)
+  if (req.senderId !== "screenshot") {
+    // 抛给下一个Listener
+    res();
+  }
   if (req.message === 'init') {
     res({}) // prevent re-injecting
 
@@ -119,5 +126,6 @@ chrome.runtime.onMessage.addListener((req, sender, res) => {
       capture(true)
     }
   }
+  console.log(`离开 assets\html\screenshot\js\content.js 中的onMessage Listener`)
   return true
 })

packages/shell-chrome/assets/js/background.js

@@ -10,6 +10,22 @@ chrome.contextMenus.create({
 // 打印消息日志
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   console.log("request", request, "path", sender.url.replace(sender.origin, ""), "sender", sender, "sendResponse", sendResponse);
+
+  console.log(`进入 assets\js\background.js 中的onMessage Listener`)
+
+  // 抛给下一个Listener
+  sendResponse();
+
+  console.log(`离开 assets\js\background.js 中的onMessage Listener`)
+
+  return true;
+
+  /**
+   * refer:
+   * https://stackoverflow.com/questions/4924125/can-chrome-extension-background-pages-have-multiple-listeners
+   * https://developer.chrome.com/extensions/runtime#event-onMessage
+   * https://blog.csdn.net/lamp_yang_3533/article/details/100174074
+   */
 })
 
 

packages/shell-chrome/assets/js/mouse-effects/click.js

@@ -7,10 +7,18 @@ $(function() {
 
     // 每次改变开关状态时刷新页面使功能及时生效
     chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+      console.log(`进入 assets\js\mouse-effects\click.js 中的onMessage Listener`)
+        if (request.senderId !== "mouse-effects") {
+          // 抛给下一个Listener
+          sendResponse();
+        }
         // TODO: 这里不能这么写，否则会导致其他模块发送消息时触发页面刷新
         // console.log('click');
         // location.reload();
         // sendResponse('Reload page');
+
+        console.log(`离开 assets\js\mouse-effects\click.js 中的onMessage Listener`)
+        return true;
     })
 
     // 控制功能是否开启

packages/shell-chrome/assets/js/mouse-effects/mouse-style.js

@@ -6,10 +6,18 @@ $(function() {
     console.log("[BitDance extension] 学生助手插件 - 鼠标样式模块加载成功");
     // 每次改变开关状态时刷新页面使功能及时生效
     chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+        console.log(`进入 assets\js\mouse-effects\mouse-style.js 中的onMessage Listener`)
+        if (request.senderId !== "mouse-effects") {
+          // 抛给下一个Listener
+          sendResponse();
+        }
         // TODO: 这里不能这么写，否则会导致其他模块发送消息时触发页面刷新
         // console.log('mouse');
         // location.reload();
         // sendResponse('Reload page');
+
+        console.log(`离开 assets\js\mouse-effects\mouse-style.js 中的onMessage Listener`)
+        return true;
     })
 
     // 控制功能是否开启