Question

我希望能够将Web应用程序中的消息发送到chrome扩展程序，以便更易于使用（发送身份验证令牌，因此用户不必登录两次）。但是，在看了documentation并阅读了一堆SO问题之后，我什么都无法为我工作。

manifest.json中有一些部分：

"content_security_policy": "script-src 'self' https://330218550995.ngrok.io; object-src 'self'",
"background": {
    "scripts": ["background.js"],
    "persistent": false
},
"externally_connectable": {
    "matches": [
        "*://localhost/*",
        "*://*.ngrok.io/*"
    ]
},
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "exclude_matches": [
      "*://*.olympiatasks.com/*",
      "https://app.olympiatasks.com/*",
      "https://*.olympiatasks.com/*"
  ],
    "css": ["/static/css/main.css"],
    "js": [
      "/static/js/runtime-main.js", 
      "/static/js/2.js", 
      "/static/js/main.js"
    ]
  }
],

在content script里面，我这样做：

const ExtensionID = process.env.REACT_APP_EXTENSION_ID || '';
chrome?.runtime.connect(ExtensionID, { name: 'example' });
chrome?.runtime?.sendMessage('Hi from content script')

在web page里面，我这样做：

const ExtensionID = process.env.REACT_APP_EXTENSION_ID || "";
chrome.runtime.connect(ExtensionID, { name: "example" });
chrome?.runtime?.sendMessage(ExtensionID, "Hi from app");

然后是background.js中的侦听器：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    console.log({ request })
});

chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) => {
    console.log("Received message from " + sender + ": ", request);
    sendResponse({ received: true }); //respond however you like
});

打开网站后，扩展程序已成功注入，在background.js页面的开发控制台中，我得到以下信息：

background.js的Hello world

{请求：“内容脚本中的嗨”}

缺少“来自应用程序的嗨”，这表示未发送/接收。我使用ngrok来设置转发到我的应用，原因是：

域为localhost
协议不是https

可能是问题所在，但是如您所料，没有运气。

到目前为止，我已经执行了以下操作：

在我的externally_connectable中设置我的manifest.json
在onMessageExternal中设置background.js侦听器
使用分机ID呼叫runtime.sendMessage，如图in the docs
使用https网站进行安全连接

在此问题上的任何帮助都将受到赞赏

Answer 1

我们可以使用content-script和背景js文件在网站和chrome扩展程序之间同步身份验证令牌。

在web page内部，我这样做 ...

我不确定您是如何在web page上完成的

这就是我将访问令牌从web page发送到extension的过程。

这是我的content-script文件。

/* eslint-disable no-undef */

const hostScript = () => {
  // ----------------- Function Declarations -----------------

  let listenGetTokenResponseFromWindow = () => {};

  const sendMessagesToExtension = (msg, callback = null) => {
    chrome.runtime.sendMessage(msg);
  };

  const sendMessagesToWindow = (msg, callback = null) => {
    const { type } = msg;
    
    switch (type) {
      case ExtensionMessagesTypes.GetTokenFromWindow:
        // Can not pass the function with window.postMessage. Only JSON object can be passed.
        // So reset the listener
        window.postMessage(msg, document.location.origin);

        window.removeEventListener("message", listenGetTokenResponseFromWindow);
        listenGetTokenResponseFromWindow = event => {
          if (event.source !== window) return;
          if (event.data.type === ExtensionMessagesTypes.GetTokenFromWindowResponse) {
            const { payload } = event.data;
            !!callback && callback(payload.token);
          }
        };
        window.addEventListener("message", listenGetTokenResponseFromWindow);
        break;
      case ExtensionMessagesTypes.SetWindowToken:
        window.postMessage(msg, document.location.origin);
        !!callback && callback();
        break;
      default:
        break;
    }
  };

  const listenMessagesFromWindow = event => {
    if (event.source !== window) return;

    const msg = event.data;
    
    Object.values(ExtensionMessagesTypes).includes(msg.type) && sendMessagesToExtension(msg);
  };

  const listenMessagesFromExtension = (msg, sender, response) => {
    sendMessagesToWindow(msg, response);
    return true; // means response is async
  };

  // ----------------- Listener Definitions -----------------

  window.removeEventListener("message", listenMessagesFromWindow);
  window.addEventListener("message", listenMessagesFromWindow);

  chrome.runtime.onMessage.removeListener(listenMessagesFromExtension);
  chrome.runtime.onMessage.addListener(listenMessagesFromExtension);

  // Reset extension token as windows token
  sendMessagesToWindow({ type: ExtensionMessagesTypes.GetTokenFromWindow }, token => {
    sendMessagesToExtension({
      type: ExtensionMessagesTypes.SetExtensionToken,
      payload: { token }
    });
  });
};

这是background.js文件。

(() => {
        chrome.runtime.onMessage.addListener((msg, sender, response) => {
            switch (msg.type) {
                case ExtensionMessagesTypes.GetTokens:
                    getAccessTokens(response);
                    break;
                case ExtensionMessagesTypes.SetExtensionToken:
                    !!msg.payload && !!msg.payload.token && setAccessTokenToExtensionLocalStorage(msg.payload.token, response);
                    break;
                case ExtensionMessagesTypes.SetWindowToken:
                    !!msg.payload && !!msg.payload.token && sendMessageFromExtensionToWindow(msg, response);
                    break;
            }
    });
})();

const sendMessageFromExtensionToWindow = (msg, callback = null) => {
    chrome.tabs.query({ currentWindow: true, url: `${HostURL}/*` }, tabs => {
        if (tabs.length < 1) {
            !!callback && callback(null);
            return;
        }

        if (msg.type === ExtensionMessagesTypes.GetTokenFromWindow) {
            chrome.tabs.sendMessage(tabs[0].id, msg, token => {
                !!callback && callback(token);
            });
        } else if (msg.type === ExtensionMessagesTypes.SetWindowToken) {
            chrome.tabs.sendMessage(tabs[0].id, msg, () => {
                !!callback && callback();
            });
        }
    });
};

// Authentication

const setAccessTokenToExtensionLocalStorage = (access_token, callback = null) => {
    chrome.storage.local.set({ access_token }, () => {
        !!callback && callback();
    });
};

const getAccessTokenFromChromeStorage = callback => {
    chrome.storage.local.get(['access_token'], result => {
        !!callback && callback(result.access_token);
    });
};

const getAccessTokens = callback => {
    getAccessTokenFromChromeStorage(accessTokenFromExtension => {
        sendMessageFromExtensionToWindow({ type: ExtensionMessagesTypes.GetTokenFromWindow }, accessTokenFromWindow => {
            callback({
                accessTokenFromExtension: accessTokenFromExtension || '',
                accessTokenFromWindow: accessTokenFromWindow || ''
            });
        });
    });
};

const handleLogin = payload => {
    //TODO: Handling refresh token
    
    const { token } = payload;
    if (!token) return;

    setAccessTokenToExtensionLocalStorage(token);
};

const handleLogout = () => {
    setAccessTokenToExtensionLocalStorage(null);
};

PS：manifest.json文件中不需要externally_connectable选项。

Answer 2

感谢@wOxxOm评论，我能够解决此问题。

我引用：

暂时，由于ngrok.io位于public suffix list中，这意味着它基本上类似于com，而external_connectable禁止使用它。尝试对网站使用更具体的模式。

我将网址更改为使用一个更具体的https://330218550995.ngrok.io/*，现在可以正常使用

从网页发送消息到chrome扩展程序

2 个答案: