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.