[EXP] Improve documentation on Messaging API

flexchar commented 10 months ago

What is the example you wish to see?

Hi! Hope this message finds you well.

It feels like you're building a wonderful framework that hides a lot of pain away on top of something very complicated (MV3). However I spent hours and cannot wrap my head around how or rather why Messaging doesn't work.

I'm trying to send a message from CS in the MAIN world to Background for processing.

I've studied:

It feels like you solve a big pain in the ass and I'm even happy to pay for subscription even though I don't need to pay the offerings. But I cannot seem to figure it out. I either get that Chrome runtime is not available or nothing happens at all.

On the documentation site in the Relay section there is a code snippet saying On the plasmo.com web page, you can send messages via the relay:. This feels very confusing as why or how do I insert a code to a webpage if I'm not using the owner of the website - the owner of Chrome extension.

I would like to suggest:

adding visual graphs how data can flow and what are restrictions (maybe MAIN world is not supported at all?);
splitting example repo into several isolated examples showing, for example, how to send data from MAIN world to BG script and how to return and so on so for for each direction;
add very verbose comments to the code in example repos, please see this example from Python framework: https://github.com/modal-labs/modal-examples/blob/main/06_gpu_and_ml/falcon_gptq.py - their comments help enormously for the community to get going;
explaining why do I need to Content Scripts one to send a message Via Relay and another to be the Relay (based on the answer in GitHub issue)

Is there any context that might help us understand?

I'm only interested in using Chrome Manifest 3.

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems.

flexchar commented 10 months ago

I also would like to ask what this means:

window.relay = {
    description: 'Message from content script in main world',
    tryRelay: async () => {
        let result = await sendToBackgroundViaRelay({
            name: 'chat',
        });
        return result;
    },
};

What is the purpose of this object and who is consuming it? :)

flexchar commented 10 months ago

I learned that I had CS script in the MAiN world set to run_at: 'document_start'. Apparently this would cause nothing to happen including no errors. Removing this completely made it work.

Loque18 commented 9 months ago

+1 I am trying to access chrome.runtime, but I can't this is my script content

import type { PlasmoCSConfig } from 'plasmo';

export const config: PlasmoCSConfig = {
    matches: ['<all_urls>']
};

export {};

console.log('cs loaded', chrome.runtime);

if (chrome.runtime) {
    console.log('chrome.runtime exists', chrome.runtime);

    chrome.runtime.sendMessage({ action: 'connect' });

    // @ts-ignore
    window.pwr = {
        name: 'pwr',
        connect: function () {
            console.log('connect');
        }
    };
} else {
    console.log('chrome.runtime does not exist');
}

the logs in the main world are the following

anata loaded, chrome.runtime {}
chrome.runtime exists chrome.runtime {}

but then if I try accessing the object that I injected into the window (window.pwr) it says undefined

and chrome.runtime is not defined anymore, I'm having a hard time trying to communicate the cs with the background

jahilliard commented 3 months ago

I learned that I had CS script in the MAiN world set to run_at: 'document_start'. Apparently this would cause nothing to happen including no errors. Removing this completely made it work.

This should really be called out in the documentation!

PlasmoHQ / plasmo