CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensionbrowser-extension
Derek
Derek

Reputation: 228

Chrome Extension Permissions

I have been working on a Chrome Extension that injects Javascript on Youtube video pages, but for some reason, it is also injecting the JS on the homepage and other non video pages. I read through the Google documents for building a Chrome Extension, as well as read a few other questions on here, and thought I had a good understanding of the wild card(*) but maybe not.

  1. With the below permissions code snippet, shouldn't it only inject the CSS/JS on the video pages due to "watch?v=*"?

  2. Is there a better way to go about detecting video pages?

 

"permissions": [
    "https://youtube.com/watch?v=*",
    "http://youtube.com/watch?v=*"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://youtube.com/watch?v=*",
        "http://youtube.com/watch?v=*"
      ],
      "css": [
        "src/inject/inject.css"
      ]
    },
    {
      "matches": [
        "https://youtube.com/watch?v=*",
        "http://youtube.com/watch?v=*"
      ],
      "js": [
        "src/inject/inject.js"
      ]
    }
  ]

Upvotes: 0

Views: 542

Answers (1)

Rob W
Rob W

Reputation: 349182

First of all, let's assume the following in the manifest file. This snippet is equivalent to what you've posted in the question, but just a bit shorter, "*://" = http and https; You don't need to declare the permission if you inject a content script through the manifest file.

"content_scripts": [{
  "matches": [ "*://youtube.com/watch?v=*" ],
  "css": [ "src/inject/inject.css" ],
  "js": [ "src/inject/inject.js" ]
}]

About your two questions:

  1. shouldn't it only inject the CSS/JS on the video pages due to "watch?v=*"?

Yes, and it does. However, YouTube does not really "unload" the page when you navigate to a different page. Instead, the displayed HTML is updated and the URL is changed using the history.pushState API. Consequently, extension developers usually find that their code is "not injecting" or "run too often" even when they restrict content scripts/styles to "watch?v=" pages.

  • "not injecting" occurs when you initially visit a non-watch page (e.g. the home page) and then click on a video. You would expect that the script activates on the video page because the URL has changed to "watch?v", but this does not happen because the page did not actually reload.

  • "run too often" occurs when you navigate from a watch-page to a non-video page (e.g. the home page). You'd expect that the script does not run on the home page, because the URL does not match "watch?v=", but since the page did not unload, the previous scripts are still active.

  1. Is there a better way to go about detecting video pages?

You could use the method described here to detect these transitions and appropriately respond to these events. E.g. enable/disable your logic depending on whether the current page is a /watch page. This implies that you have to code carefully, and make sure that you properly clean up your DOM and events. (note that getting this right is not straightforward: merely inserting one element in the document for which you keep a reference is sufficient to prevent the garbage collector from freeing up the memory used by the whole disconnected DOM tree above!)

Upvotes: 2

Related Questions