Message from devtools (custom tab) to Content script?

Question

How can i send a message from devtools (custom tab) to Content script?

What i attempted:

I uploaded my Code here: https://github.com/TyGu1/tryGetResponseBody.

The Code:

devtools.html

<html>   
    <body>
        <script src="panel.js"></script>    yoyoyo
    </body>
</html>

devtools.js

chrome.devtools.panels.create("NewPanel",
  null,
  "panel.html",
  null
);

Panel.html

<html>
    <body>
        <script src="panel.js"></script>    yoyoyo
    </body>
</html>

I want to send a message from here (Panel.js) to inject.js. According to this article https://medium.com/better-programming/chrome-extension-intercepting-and-reading-the-body-of-http-requests-dd9ebdf2348b on Panel.js i could use sthg like the following:

Panel.js

        // i want to send a message  from here to inject.js
        chrome.runtime.sendMessage({
            response: "Hallo"
        });

injects.js (the message from Panel.js doesnt arrive here).

alert(2); // this works
chrome.runtime.onMessage.addListener(function(response) {alert(Response)})

I looked here:

https://developer.chrome.com/extensions/messaging
Communicating between Chrome DevTools and content script in extension indicates that i should send a script to Background.js and from there to Content script. I tried that as well, but i didnt get it to work. Could add that as well, but then it would be too much Code here i guess.

manifest.json

{
  "manifest_version": 2,
  "name": "Sivis Helper",
  "description": "Click on any element to scrape it via rvest / RSelenium",
  "homepage_url": "https://github.com/",
  "version": "0.1.1",
  "icons": {
    "64": "icons/default-64.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_icon": "icons/default-64.png",
    "default_title": "Click on any element to scrape it via rvest / RSelenium"
  },
  "content_scripts": [{ 
    "all_frames": true,
    "matches": ["<all_urls>"],  
    "js":["inspect.js"]
  }],
  "commands": {
    "toggle-xpath": {
      "suggested_key": { 
        "default": "Ctrl+Shift+U",
        "mac": "Command+Shift+U"
      },
      "description": "Toggle plugin"
    }
  },
  "options_ui": {
    "page": "options.html"
  },
  "permissions": ["debugger", "pageCapture", "tabs", "activeTab", "<all_urls>", "storage", "webRequest", "clipboardWrite", "clipboardRead", "webRequestBlocking"]
}

Possible duplicate of [sending message to chrome extension from a web page](https://stackoverflow.com/questions/11431337/sending-message-to-chrome-extension-from-a-web-page) — Toan Quoc Ho, Oct 10 '19 at 20:04
Content scripts can't receive chrome.runtime.sendMessage, it's for extension pages. There is a simpler method via chrome.devtools.inspectedWindow.eval: [Communicating between Chrome DevTools and content script in extension](//stackoverflow.com/a/17511447). Alternatively you can keep using runtime.sendMessage but also add an onMessage listener in the background script that will relay the message to the content script using chrome.tabs.sendMessage, there should be an answer showing how to do it if you need an example. — wOxxOm, Oct 12 '19 at 08:44

score 0 · Answer 1 · answered Oct 11 '19 at 15:10

0

You can send a message directly to background.js and then from background.js -> devtools.js. This is a similar mechanism as content script, you need to respond by tab id

answered Oct 11 '19 at 15:10

Yuvals

3,094
5
32
60

Message from devtools (custom tab) to Content script?

1 Answers1