Anlanther Posts - Answer Overflow

Anlanther

•Created by Anlanther on 7/13/2023 in #👾extension

Messaging-chrome.runtime.sendMessage() called from a webpage must specify an ExtensionID (string)

TypeError:error invocation of runtime.sendMessage(optional string extensionId, any message....): chrome.runtime.sendMessage() called from a webpage must specify an ExtensionID (string) for its first argument. I'm using sendToBackground from a function injected into the webpage from the content script through the 'MAIN' world. The website is also already is listed under "externally_connectable" and have an async API call set up in a file under background/messages. The code is like this:

// function injected to window object
async getResult(name: string) {
    const resp = await sendToBackground({
        name: 'get-result',
        body: { name }
    })

    return resp;
}

// /background/messages/get-result.ts
const handler: Plasmo.MessageHandler = async (req, res) => {
    const message = await someFunc(req.body.name)

    res.send(message)
}

export default handler;

// function injected to window object
async getResult(name: string) {
    const resp = await sendToBackground({
        name: 'get-result',
        body: { name }
    })

    return resp;
}

// /background/messages/get-result.ts
const handler: Plasmo.MessageHandler = async (req, res) => {
    const message = await someFunc(req.body.name)

    res.send(message)
}

export default handler;

I have the extension ID in my .env. Am I supposed to insert it somewhere? sendToBackground doesn't seem to have any other arguements I can pass.

2 replies

PD🧩 Plasmo Developers

•Created by Anlanther on 7/11/2023 in #👟framework

Plans to add @use as an import resolution?

I've imported a bunch of components into my project, but the sass files of the components use @use to get styles from other files. I found the Import Resolution documentation page and saw everything is imported with an 'import' statement. Since the use of @use is so imbedded in the components I have installed, I would just like to ask if there is a way to get the bundler to pick up on the other sass files that use @use?

8 replies

PD🧩 Plasmo Developers

•Created by Anlanther on 7/11/2023 in #👾extension

How to add additional icons into the extension build

Is there a way to include other icons in the build so that I can customise my extension icon depending on which url I'm on? In the icon page within the documentation, I can see there are options to include icons for specific builds, however I would like to ask if there is a way to include other icons for the same build? My psudo-code usecase:

chrome.tabs.onUpdated.addListener((tabId, tab) => {
    const tabUrlIsEnabled = ENABLED_URLS.some((url) => tab.url.includes(url))
    if (tabUrlIsEnabled) {
        chrome.action.setIcon({ path: 'assets/enabled.png' })
    } else {
        chrome.action.setIcon({ path: 'assets/disabled.png' })
    }
}

chrome.tabs.onUpdated.addListener((tabId, tab) => {
    const tabUrlIsEnabled = ENABLED_URLS.some((url) => tab.url.includes(url))
    if (tabUrlIsEnabled) {
        chrome.action.setIcon({ path: 'assets/enabled.png' })
    } else {
        chrome.action.setIcon({ path: 'assets/disabled.png' })
    }
}

1 replies

Gaming

Programming