I'm trying to append a DOM to a self chrome extension file opened from popup.js. Let's say I have a file that exists among chrome extension files called temp.html, At some point while executing popup.js, I open this file using chrome.tabs.create then I want to append a DOM to this html file.

Is there anyway I could do so from popup.js ?

Extension files:

1-manifest.json
2-functions
    functions.js
    domToTables.js
3-libs
    jquery-3.3.1.min.js
    bootstrap-4.2.1-dist
4-myTables
    stylesheet.css
    *temp.html* \\this file
5-popup
    stylesheet.css
    index.html
    popup.js
6-background.js
7-content.js

I'm trying to append a DOM to a self chrome extension file opened from popup.js. Let's say I have a file that exists among chrome extension files called temp.html, At some point while executing popup.js, I open this file using chrome.tabs.create then I want to append a DOM to this html file.

Is there anyway I could do so from popup.js ?

Extension files:

1-manifest.json
2-functions
    functions.js
    domToTables.js
3-libs
    jquery-3.3.1.min.js
    bootstrap-4.2.1-dist
4-myTables
    stylesheet.css
    *temp.html* \\this file
5-popup
    stylesheet.css
    index.html
    popup.js
6-background.js
7-content.js

• javascript
• google-chrome-extension

• To clarify. Is that a page in your extension, or some web page? – Xan Commented Feb 15, 2019 at 12:02
• 1 You can by using chrome.extension.getViews (assuming the tab is opened with active:false), but the proper approach is usually to send a message instead and let the page itself handle it inside its script that's loaded via standard <script src=....>. I'll try to find an existing answer, there should be many. – woxxom Commented Feb 15, 2019 at 12:03
• ...or use storage instead of messaging: Send message to background page, update the html, and then show it in a tab – woxxom Commented Feb 15, 2019 at 12:10
• Then I agree with wOxxOm's assessment. The linked question should outline what you need to do (use Messaging). – Xan Commented Feb 15, 2019 at 12:56
• @wOxxOm, thanks, gonna try your approaches. – Omar Taher Commented Feb 15, 2019 at 12:57

1 Answer 1

Although you can directly access DOM of your own extension's page opened in a new tab/window by using chrome.extension.getViews (or even simpler if window.open was used), but it's the approach from the times when UI was primitive so it won't work if your opened page uses a presentation framework. Moreover, when used from the popup you would have to open the tab in background first (active:false in the parameters of chrome.tabs.create), otherwise the popup will auto-close so no further code would run, which is unfortunately still unreliable because another extension may force-activate the tab.

The reliable/proper approach is to pass the data to the other page and let it handle the data inside its script that's loaded in that page html via the standard <script src="other-page.js"></script>.

1. MV2/MV3: HTML5 localStorage + synchronous access

^{* MV3 supports localStorage only in extension pages (e.g. action popup or options) and not in the background script.}

Use if you need to access the data during loading inside the other page before the first painted frame e.g. to choose a light/dark theme.

Disadvantage: big amounts of data could noticeably slow down a budget device and you'll have to JSON'ify the non-string types such as objects or arrays.

popup.js:

localStorage.sharedData = JSON.stringify({foo: 123, bar: [1, 2, 3], theme: 'dark'});
chrome.tabs.create({url: 'other-page.html'});

other-page.js:

let sharedData;
try {
  sharedData = JSON.parse(localStorage.sharedData);
  if (sharedData.theme === 'dark') {
    document.documentElement.style = 'background: #000; color: #aaa;';
  }
} catch (e) {}
delete localStorage.sharedData;

2. MV2/MV3: URL parameters + synchronous access

Use if you need to access the data during loading inside the other page before the first painted frame e.g. to choose a light/dark theme.

Disadvantage: a long url in the address bar and you'll have to JSON'ify the non-string types such as objects or arrays.

popup.js:

chrome.tabs.create({
  url: 'other-page.html?data=' + encodeURIComponent(JSON.stringify({foo: [1, 2, 3]})),
});

other-page.js:

let sharedData;
try {
  sharedData = JSON.parse(new URLSearchParams(location.search).get('data'));
} catch (e) {}
// simplify the displayed URL in the address bar
history.replace({}, document.title, location.origin + location.pathname);

3. MV2: Background script's global variable + synchronous access

Use if you need to access the data during loading inside the other page before the first painted frame e.g. to choose a light/dark theme.

Disadvantage 1: the need for a background page.

Disadvantage 2: the need to deep-clone the objects by using JSON.parse(JSON.stringify(data)) or a custom deepClone that works properly for cross-window contexts because none of the popular deepClone implementations do it AFAIK: specifically it should use the target window's reference of the object constructor.

manifest.json:

"background": {
  "scripts": ["bg.js"],
  "persistent": false
}

popup.js:

// ensure the non-persistent background page is loaded
chrome.runtime.getBackgroundPage(bg => {
  // using JSON'ification to avoid dead cross-window references.
  bg.sharedData = JSON.stringify({foo: 123, bar: [1, 2, 3], theme: 'dark'});
  chrome.tabs.create({url: 'other-page.html'});
});

other-page.js:

// if this tab was reloaded the background page may be unloaded and the variable is lost
// but we were saving a copy in HTML5 sessionStorage!
let sharedData = sessionStorage.sharedData;
if (!sharedData) {
  const bg = chrome.extension.getBackgroundPage();
  sharedData = bg && bg.sharedData;
  if (sharedData) {
    sessionStorage.sharedData = sharedData;
  }
}
// using JSON'ification to avoid dead cross-window references.
try {
  sharedData = JSON.parse(sharedData);
} catch (e) {}

4. MV2/MV3: Background script relay messaging in two hops

Use if you need to perform a sequence of actions in the background page of which opening the tab is just the first step. For example we need to pass the data in the second step.

The background page is needed because the popup would be closed and its scripts won't run anymore when an active tab opens in the same window where the popup is displayed. One might think that creating a tab with active: false would solve the problem but only until a user decides to install another extension that overrides tab opening behavior. You would think you could open a new window but again there's no guarantee some other extension doesn't re-attach the new window's tab into the existing window thus closing your popup.

Disadvantage 1: in Chrome the data is JSON'ified internally so it nukes all the nonstandard types such as WeakMap, TypedArray, Blob, etc. In Firefox they seem to be using structured cloning so more types can be shared.

Disadvantage 2: we're sending the same data message twice.

Note: I'm using Mozilla's WebExtension polyfill.

manifest.json:

"background": {
  "scripts": [
    "browser-polyfill.min.js",
    "bg.js"
  ],
  "persistent": false
}

popup.js:

chrome.runtime.sendMessage({
  action: 'openTab',
  url: '/other-page.html',
  data: {foo: 123, bar: [1, 2, 3], theme: 'dark'},
});

bg.js:

function onTabLoaded(tabId) {
  return new Promise(resolve => {
    browser.tabs.onUpdated.addListener(function onUpdated(id, change) {
      if (id === tabId && change.status === 'complete') {
        browser.tabs.onUpdated.removeListener(onUpdated);
        resolve();
      }
    });
  });
}

browser.runtime.onMessage.addListener(async (msg = {}, sender) => {
  if (msg.action === 'openTab') {
    const tab = await browser.tabs.create({url: msg.url});
    await onTabLoaded(tab.id);
    await browser.tabs.sendMessage(tab.id, {
      action: 'setData',
      data: msg.data,
    });
  }
});

other-page.html:

<!doctype html>
<p id="text"></p>
<!-- scripts at the end of the page run when DOM is ready -->
<script src="other-page.js"></script>

other-page.js:

chrome.runtime.onMessage.addListener((msg, sender) => {
  if (msg.action === 'setData') {
    console.log(msg.data);
    document.getElementById('text').textContent = JSON.stringify(msg.data, null, '  ');
    // you can use msg.data only inside this callback
    // and you can save it in a global variable to use in the code 
    // that's guaranteed to run at a later point in time
  }
});

5. MV2/MV3: chrome.storage.local

See the example for chrome.storage.local in this answer.