0

I am currently developing a Google Chrome extension that enables the injection of CSS code into a specified website. This extension includes a toggle button that allows users to easily turn the functionality on or off. However, I have encountered an issue wherein, upon activating the button and subsequently navigating to another tab, returning to the original tab results in the extension no longer functioning until the page is manually refreshed.

Here is the complete code snippet:

background.js

chrome.action.onClicked.addListener(tab => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: applyCSS
  });
});

function applyCSS() {
  const css = `
    p, ol {
      direction: rtl;
      text-align: right;
    }

    ol > pre {
      direction: ltr!important;
      text-align: left;
    }

    pre {
      direction: ltr!important;
      text-align: left;
    }

    .flex-1 {
      text-align: left;
    }
  `;

  const style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);
}

manifest.json

{
  "manifest_version": 3,
  "name": "Custom CSS Injector",
  "version": "1.0",
  "permissions": [
    "scripting",
    "activeTab"
  ],
  "host_permissions": [
    "https://example.com/*"  // Replace with the actual website URL
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
}

popup.css

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input[type="checkbox"]:checked + .slider {
  background-color: #2196F3;
}

input[type="checkbox"]:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Custom CSS Injector</title>
    <link rel="stylesheet" href="popup.css">
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>Custom CSS Injector</h1>
    <label class="switch">
      <input type="checkbox" id="toggleCSS">
      <span class="slider"></span>
    </label>
  </body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function() {
  const toggleCSS = document.getElementById('toggleCSS');

  toggleCSS.addEventListener('change', async () => {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

    if (toggleCSS.checked) {
      chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: applyCSS
      });
    } else {
      chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: removeCSS
      });
    }
  });

  function applyCSS() {
    const css = `
      p, ol {
        direction: rtl;
        text-align: right;
      }

      ol > pre {
        direction: ltr!important;
        text-align: left;
      }

      pre {
        direction: ltr!important;
        text-align: left;
      }

      .flex-1 {
        text-align: left;
      }
    `;

    const style = document.createElement('style');
    style.setAttribute('id', 'customCSS');
    style.textContent = css;
    document.head.appendChild(style);
  }

  function removeCSS() {
    const style = document.getElementById('customCSS');
    if (style) {
      style.remove();
    }
  }
});

What I tried was activating the toggle button on the Google Chrome extension and then navigating to another tab. I expected the extension to continue functioning properly when I returned to the original tab.

However, the actual result was that the extension stopped working upon returning to the tab without any manual intervention. To restore its functionality, I had to refresh the page manually.

I expected the extension to retain its functionality even if I switched to another tab and returned to the original tab.

admiral
  • 1
  • Use registerContentScripts in addition to executeScripts, [example](https://stackoverflow.com/a/75283704). Also, you don't need to use js for the content script, you can specify `css` file directly in chrome.scripting API if you extract the css code into that separate file. – wOxxOm May 22 '23 at 14:30

0 Answers0