background.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

function applyCSSToTab(tab) {
  const url = new URL(tab.url);
  const hostname = url.hostname;

  browser.storage.local.get("transparentZenSettings").then((settings) => {
    if (settings.transparentZenSettings?.enableStyling) {
      browser.storage.local.get("styles").then((data) => {
        const cssFileName = Object.keys(data.styles?.website || {}).find(
          (key) => hostname.includes(key.replace(".css", ""))
        );

        if (cssFileName) {
          const features = data.styles.website[cssFileName];
          const featureSettings =
            settings.transparentZenSettings.featureSettings?.[cssFileName] ||
            {};

          let combinedCSS = "";
          for (const [feature, css] of Object.entries(features)) {
            if (featureSettings[feature] !== false) {
              combinedCSS += css + "\n";
            }
          }

          if (combinedCSS) {
            browser.tabs
              .insertCSS(tab.id, { code: combinedCSS })
              .then(() => {
                console.log(`Injected custom CSS for ${hostname}`);
              })
              .catch((error) => {
                console.error(`Error applying CSS to ${hostname}:`, error);
              });
          }
        }
      });
    }
  });
}

browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === "complete") {
    applyCSSToTab(tab);
  }
});

browser.tabs.onActivated.addListener(async (activeInfo) => {
  const tab = await browser.tabs.get(activeInfo.tabId);
  applyCSSToTab(tab);
});