2

I have started developing an addon which would work on package.json of a Github repo. On loading the addon, it requires an additional page refresh for the addon to take effect instead of applying the border as soon as the url is recognized.

manifest.json

{
  "manifest_version": 2,
  "name": "Border It",
  "version": "0.0.1",
  "permissions": ["activeTab", "tabs", "https://github.com/*"],
  "content_scripts": [
    {
      "matches": ["https://github.com/*/package.json"],
      "js": ["src/scripts/borderify.js"],
    }
  ]
}

borderify.js

document.body.style.border = '5px solid red';

What am I doing wrong?

Neeraj Lagwankar
  • 302
  • 2
  • 9
  • Your issue isn't clear. It sounds like you're saying you have to load the page after you install the add-on in order for the content script to be injected. This is normal. Content scripts are only loaded when the page is loaded. If you install a new add-on, content scripts are not loaded into existing pages, unless you've specifically written code to do that (e.g. code you've written in a background script which manually loads your content script into existing matching tabs). However, you could be saying that you need to refresh twice after the add-on is installed, which would not be expected. – Makyen Apr 25 '20 at 05:41
  • @Makyen this is what happens. 1. I load the addon and go to package.json of a github repo 2. The addon should display a border, which it doesn't 3. I press refresh and the border is displayed – Neeraj Lagwankar Apr 25 '20 at 07:35

1 Answers1

3

GitHub updates page content dynamically, so you need to run your script on every GitHub pages ("matches": ["https://github.com/*"]) and observe the location change. Here is more hints: Event when window.location.href changes

(updated) Example implementation based on MutationObserver:

{
  "manifest_version": 2,
  "name": "Border It",
  "version": "0.0.1",
  "permissions": [
    "activeTab",
    "tabs",
    "https://github.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["https://github.com/*"],
      "js": ["borderify.js"]
    }
  ]
}

function onLocationChanged() {
  if (/\/package.json([?#]|$)/.test(location.pathname))
    document.body.style.border = '5px solid red';
  else
    document.body.style.border = '';
}
onLocationChanged(); // executed when the page is initially loaded

let lastUrl;

const observer = new MutationObserver(mutations => {
  // executed on any dynamic change in the page
  if (location.href == lastUrl)
    return;
  lastUrl = location.href;
  onLocationChanged();
});
const config = {
  childList: true,
  subtree: true
};
observer.observe(document.body, config);
Piro
  • 244
  • 1
  • 5
  • All the permissions are given, and this is in my background script ``` const logHstoryStateDetails = (details) => { console.log(details); }; browser.webNavigation.onHistoryStateUpdated.addListener(logHstoryStateDetails); ``` But I'm getting this error `Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://collector.githubapp.com/collect’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).` What should I do? – Neeraj Lagwankar Apr 27 '20 at 09:10
  • 1
    I've added an example implementation based on `MutationObserver`. It shouldn't cause any cross origin request error. – Piro May 07 '20 at 08:11