Unable to use chrome.tabs.executeScript({}) and unable to float extension pop-up Inbox

[Nish]

Hello Team,

We have published a Text to Speech extension which is expected to read aloud text data from website (user selected paragraphs) and chrome tabs through API connections.

I need help with below points:
1. I want to extract text from the active web page and use it for the Plugin we have published, can you please share a recommended method to do it.
We are trying to use the method  - chrome.tabs.executeScript({}) but it gives error that it is not supported.

2. We would like to set the extension popup float and be active on the current tab unless closed. Please suggest a recommended way to do it. You may test our published plugin, it opens like a pop-up but disappears when user clicks outside extension popup.

3. Is there a way to setup API connection via PHP code as well. Since, we were not able to use PhP, so we used Javascript instead and it is working with external API but we would like to confirm if it is expected with PHP or any backend language.

Regards,
Nish

[wOxxOm]

1. If your extension is ManifestV3 you need to use chrome.scripting.executeScript and not chrome.tabs. The new method has different parameters and requires an additional "scripting" permission.

2. You can open a) a separate window via chrome.windows.create instead of using default_popup or b) use chrome.sidePanel or c) put your UI inside the page as a DOM element like a web_accessible_resources iframe.

3. Browser can only run JS code (and WASM for CPU-intensive calculations), but you can connect to a server that runs PHP via the standard methods like fetch or WebSocket and there are also PHP-to-JavaScript transpilers.

[Nish]

Hi There,

Thanks for replying. We are still getting the error after using   chrome.scripting.executeScript. Please refer below and help us troubleshoot.

Uncaught TypeError: Error in invocation of scripting.executeScript(scripting.ScriptInjection injection, optional function callback): Error at parameter 'injection': Unexpected property: 'code'. at window.onload

Code below we have used : (working on v2 and not v3)

window.onload = function() {

    console.log("We here");

    chrome.scripting.executeScript({

    code: "window.getSelection().toString();"

    }, function(selection) {

        chrome.runtime.sendMessage({selection: selection[0]}, function(response) {

            console.log(response);

           document.getElementById("output").innerHTML = response.clips;

        });

    });

 

var text = document.getElementById("output")

 

text.addEventListener("click", function(e){

    // console.log("hi one");

    chrome.runtime.sendMessage({empty: "clear"}, function(response) {

        // console.log(response);

        // console.log("hi");

        text.innerHTML = response.clips;

 

    });

});

};

[wOxxOm]

As you can see in the documentation this new API doesn't have `code` parameter and the other parameters and usage is entirely different. You can't just change tabs to scripting. Unfortunately all examples in the documentation still show a nonsensical and unusable getTabId, so I can't even tell you to look in the documentation. Here's how you would use it:

(async () => {
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
  const [{result}] = await chrome.scripting.executeScript({
    target: {tabId: tab.id},
    func: () => getSelection().toString(),
  });
  const response = await chrome.runtime.sendMessage({selection: result});

  document.getElementById('output').innerHTML = response.clips;

})();

[Prachi]

Hi, 
I was facing the same issue, and your code was helpful to me. Thanks a lot.
My query is that I want the Chrome extension window to remain open, even when I click outside the window.

[Surasit Srisuk]

2566-07-26 12:48 GMT+07:00, Nish <nitish...@gmail.com>:
> Hi There,
> Thanks for replying. We are still getting the error after using chrome.

> *scripting*.executeScript
> <https://developer.chrome.com/docs/extensions/reference/scripting/#method-executeScript>.

>
> Please refer below and help us troubleshoot.
>
> Uncaught TypeError: Error in invocation of
> scripting.executeScript(scripting.ScriptInjection injection, optional
> function callback): Error at parameter 'injection': Unexpected property:
> 'code'. at window.onload
>

> *Code below we have used : (working on v2 and not v3)*

>
> window.onload = function() {
>
> console.log("We here");
>
> chrome.scripting.executeScript({
>
> code: "window.getSelection().toString();"
>
> }, function(selection) {
>
> chrome.runtime.sendMessage({selection: selection[0]},
> function(response) {
>
> console.log(response);
>
> document.getElementById("output").innerHTML = response.clips;
>
> });
>
> });
>
>
>
> var text = document.getElementById("output")
>
>
>
> text.addEventListener("click", function(e){
>
> // console.log("hi one");
>
> chrome.runtime.sendMessage({empty: "clear"}, function(response) {
>
> // console.log(response);
>
> // console.log("hi");
>
> text.innerHTML = response.clips;
>
>
>
> });
>
> });
>
> };
>
> On Tuesday, 25 July, 2023 at 5:57:02 pm UTC+5:30 wOxxOm wrote:
>

>> 1. If your extension is ManifestV3 you need to use chrome.*scripting*
>> .executeScript
>> <https://developer.chrome.com/docs/extensions/reference/scripting/#method-executeScript>

>>
>> and not chrome.tabs. The new method has different parameters and requires
>>
>> an additional "scripting" permission.
>> 2. You can open a) a separate window via chrome.windows.create instead of
>>
>> using default_popup or b) use chrome.sidePanel or c) put your UI inside
>> the

>> page as a DOM element like a *web_accessible_resources iframe*.

>> 3. Browser can only run JS code (and WASM for CPU-intensive calculations),
>>
>> but you can connect to a server that runs PHP via the standard methods
>> like
>> fetch

>> <https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch>

>> or WebSocket and there are also PHP-to-JavaScript transpilers.
>>
>> On Tuesday, July 25, 2023 at 12:43:04 PM UTC+3 Nish wrote:
>>
>>> Hello Team,
>>>
>>> We have published a Text to Speech extension which is expected to read
>>> aloud text data from website (user selected paragraphs) and chrome tabs
>>> through API connections.
>>>
>>> I need help with below points:
>>> 1. I want to extract text from the active web page and use it for the
>>> Plugin we have published, can you please share a recommended method to do
>>>
>>> it.
>>> We are trying to use the method - chrome.tabs.executeScript({}) but it
>>> gives error that it is not supported.
>>>
>>> 2. We would like to set the extension popup float and be active on the
>>> current tab unless closed. Please suggest a recommended way to do it. You
>>>
>>> may test our published plugin, it opens like a pop-up but disappears when
>>>
>>> user clicks outside extension popup.
>>>
>>> 3. Is there a way to setup API connection via PHP code as well. Since, we
>>>
>>> were not able to use PhP, so we used Javascript instead and it is working
>>>
>>> with external API but we would like to confirm if it is expected with PHP
>>>
>>> or any backend language.
>>>
>>> Regards,
>>> Nish
>>>
>>
>

> --
> You received this message because you are subscribed to the Google Groups
> "Chromium Extensions" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to chromium-extens...@chromium.org.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/deda2c4b-63ed-4f13-b8c6-ee586ba7e565n%40chromium.org.
>