0

I have a chrome extension which was built on v2 version. I'm using background script to initialise my app. Then in popup.js I'm using runtime.getBackgroundPages() to get the instance from background page and perform some operation.

background.js


class Client {
  constructor() {
    this.settings = { env: "qa" };
  }
  init() {
    <iframe
      id="inlineFrameExample"
      title="Inline Frame Example"
      width="300"
      height="200"
      src="src"
    ></iframe>;
  }
}

class App {
  constructor() {
    this.app = new Client();
  }

  render() {}
}

window.app = new App();

the reason for keeping app is that it acts as single source of truth. All session data, settings etc are stored here. Other part of the extension like popup.js use this instance to read and update values.

popup.js

 
class Popup{
    constructor(){
        this.app = chrome.runtime.getBackgroundPage(); // this is not working
        this.app.init();
    }
 
  // remianing logic

}

Now since in v3 , the background script has been removed and service worker should be used. Service worker doesn't have access to dom , document , window objects.

Hence I'm facing difficulties in migrating. I tried storing the app instance in chrome storage. But due to serialization, the methods are getting removed from the value.

here is how I'm trying in mv3 :

// workaround 1 . (background.js)
  
const app = new App(); 
 
chrome.storage.local.set({ instance: app }).then(() => {
  console.log("Value is set to " , app);
});

// in popup.js trying to read 

chrome.storage.local.get(["instance"]).then((result) => {
  console.log("Value currently is ", result);
  result.instance.init(); // init method doesn't exists 
});

Really confused how should I redesign it ?

Any help will be highly appreciated.

programoholic
  • 4,830
  • 5
  • 20
  • 59
  • 1
    The point of MV3 is that everything can be cleaned out of RAM, and you have to take care to reload everything back from storage every time you need it. You can't use a live object as a single source of truth, you need to use storage as the single source of truth. – Andrew Parks Mar 12 '23 at 16:56
  • @AndrewParks Yeah I get that. But how can we store the entire object including the methods ? – programoholic Mar 12 '23 at 17:01
  • 1
    Methods are not data. You don't need to store methods. You only need to store the data, and then instantiate a class with that data if you need to. – Andrew Parks Mar 12 '23 at 17:03
  • 1
    There's no getBackgroundPage in MV3, so this paradigm you were using is no longer meaningful. You can just remove the background script altogether and store the state in `chrome.storage.local` or in `chrome.storage.session` in your popup script. – wOxxOm Mar 12 '23 at 17:17
  • 1
    If `iframe` should be persistent while the popup is closed you can place it inside an [offscreen document](https://developer.chrome.com/docs/extensions/reference/offscreen/) which you can create in the popup. – wOxxOm Mar 12 '23 at 17:26
  • @wOxxOm yeah the `iFrame` and `session` data should be persisted. The problem is I don't want to create new instance if the user opens the extension in another tab. What could be the best way to maintain the state ? – programoholic Mar 12 '23 at 17:29
  • What is the special situation you have that needs an iFrame to be persisted? – Andrew Parks Mar 12 '23 at 17:33
  • The solution is mentioned in my comment: place it inside an offscreen document. – wOxxOm Mar 12 '23 at 17:39
  • @AndrewParks the Iframe works like a proxy. bit complicated to explain. – programoholic Mar 12 '23 at 17:41

0 Answers0