How to get Popup and browserActon.onClicked work together on Google Chrome Extension!

[Muhammed Waleed Hafeez]

Hi there!...

see my attached screenshot ....

I have a pop.html file in my extension and I have declared it under manifest.json file.

and I have a toggle-switch-button on clicking that button I'm trying to enabled or disabled my extension for the webpage.

EXPECTED TASK::

when i click on the browserAction-icon to open my popup.html for enabling my extension on the webpage but  when i click on the browserAction-icon to open my popup.html for disabling my extension, it seems the state of that button returns back to default unchecked.

In short::

i want to enabled/disabled my extension by clicking on the toggle-button of popup.html file. and want to save my toggle-button's state for the next time i open my extension for disabling it.  

.

.

I hope that i explained my issue clearly. and sorry if i used bad grammar somewhere.

[Jackie Han]

You asked some weird questions in the last month. It seems that you don't understand some basic concepts and programming methods very well. For this question, you should save that state in storage, and check it in related code.

--
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/62b4ae03-112d-493b-825e-72761e1eb911n%40chromium.org.

[Cuyler Stuwe]

It seems to me that you’re using this Blazor thing to try to crutch on in hopes that you won’t actually have to learn the extension API.

My suggestion is to just ditch that and develop with HTML/CSS/JS directly.

I think your confusion mostly stems from “trying to fit a square peg into a round hole.”

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/CAAgdh1Ls4%2BWNwujWYOeu75K0pcGdscOfN-L8upd-9%2BsNOnzHQw%40mail.gmail.com.

[Muhammed Waleed Hafeez]

[Muhammed Waleed Hafeez]

Salem sir, with due respect, I don't know if you know about Blazor or not that how it's architecture structure works. But,  I have followed the google-chrome-extension and Blazor-webassmbly-app concepts clearly. thats why my extension is working fine. i just have problem with the browserAction-icon buton.

Blazor WebAssembly is a new UI technology from Microsoft, officially released with .NET Core 3.1 and receiving updates in .NET 5. Blazor allows developers to create single-page applications (SPAs) using C# and .NET utilising a component-based architecture. Blazor WebAssembly is a client-side in-browser implementation of Blazor which includes a .NET runtime implemented in WebAssembly.

why I'm using Blazor::

because Firstly, I wanna cut/reduce my cost of server and its upgradation. Secondly, I want to obfuscate my JavaScript code logic so for that C# .Net code is best for me. As I am a .Net web developer myself so, Microsoft's Blazor is best for me to write C# code for front-end instead of JavaScript.

.

and for Mr. Jackie Han, with due respect, I may be a newbie in chrome-extension development but I know atleast this much that .js-files under background script works when browser start/reload and .js-files under content_scripts runs on current web-URL-page (the sandbox area of browser).

But still i didn't get the answer of my solution yet. As Mr. Jackie Han said i should save my toggle-button state in storage and I've already done it but still i'm stuck on the same point. I should share my code below::

for example::

this is my switch.html known as popup.html

<div class="checkbox checbox-switch switch-primary">

                        <label>

                            Enabled/Disabled

                            <input type="checkbox" id="chkEnableDisable" />

                            <span id="spanId"></span>

                        </label>

                    </div>

this is my site.js known as popup.js

$('#chkEnableDisable').on('change', function (event) {

    if (event.currentTarget.checked) {

        var onOffExtButton = document.getElementById('chkEnableDisable').value;

        chrome.runtime.sendMessage({ type: "loadInjectJsFileAndCreateDivElement", IsExtensionDisabled: onOffExtButton });

        chrome.storage.sync.set({ 'enabledOrDisabled': onOffExtButton }, function () {

            console.log("onOffExtButton ",onOffExtButton);

        });

    } else {

        chrome.runtime.sendMessage({ type: "unloadInjectedExtension" });

    }

});

this is my background.js  (it is a Pseudocode)

  chrome.storage.sync.get('enabledOrDisabled', function (data) {

            console.log("onOffExtButton ",data);

             document.getElementById('chkEnableDisable').value=data.enabledOrDisabled;

        });

but unfortunately i need this above pseudocode inside the chrome.browserAction.onclicked.addListener(function(tab){.......}). but in the end this the point where i'm stuck. This browserAction.onClicked won't fired unless i remove popup.html under the "default_popup" in manifest.json.

[Cuyler Stuwe]

1. Yes, I understand exactly what Blazor is, hence why I said that you’re “trying to fit a square peg into a round hole” by writing C# rather than simply learning JS. Every web dev who does frontend work should know JS. The suffering you’re causing yourself is an inevitable outcome of your stubbornness.

2. Google doesn’t want you to obfuscate your code; They want to be able to review it effectively. So if you’re trying to obfuscate things as you’ve stated, you may be prone to CWS rejections or sudden removals from the store.

3. Your popup needs to be treated as a newly-opened webpage every time it’s opened. According to your code snippets, your popup never references the saved data at all (so no wonder it never updates), and your background script tries to load a setting when the extension first starts, then via callback it tries to change the value of an element it has no reference to.

[Muhammed Waleed Hafeez]

Hi. Cuyler Stuwe,

First, I hope You didn't understand me in the wrong sense.
Second, I would be happy to build my 1st chrome extension using with HTML,CSS,JS but unfortunately this is my company's requirement. They want me to build a chrome-extension  with Blazor-webassembly-app and that's why they I'm doing it. But its a amazing opportunity for me to gain more experience in c# .Net and as well as developing a chrome-extension. Don't worry I've already read the google-chrome-policy and talked with my team lead. he said we will not violate the chrome policy regarding chrome-extension development. 

Third, well, I will search on your 3rd point of advice more thoroughly.  and i will share my next practice code with you if i didn't success in it. right now I'm going to use message passing i hope that way i will be able to success on my problem.

thanks by the way.

[Jackie Han]

Here is my short answer. Please handle the rest by yourself.

If you use "runtime.sendMessage", you also need to listen to it on the other side.

see https://developer.chrome.com/docs/extensions/mv3/messaging/

Or if you focus on storage change, you can listen to storage change.

see https://developer.chrome.com/docs/extensions/reference/storage/#event-onChanged

In addition, don't use the checkbox input element '.value' property, use '.checked' property to know whether it is checked.

[Cuyler Stuwe]

At first, you said that you were using Blazor for your own reasons, but now you’re saying it’s a company requirement.

Either way, most resources for understanding how extensions fundamentally work will be written in JS, because extensions are meant to be written in JS. If you’ve never written an extension in JS before and you’re jumping to transpiled C#, you’re doing so with no fundamental understanding of how extensions work and little-to-no capacity to directly leverage resources like StackOverflow.

Given these circumstances, I’m concerned that you’ll end up frequently blocked and/or with difficult to understand bugs that you’ll have a hard time finding help for.