Three issues discovered.

[SamBiswas95]

• Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details.

{
"update_url": "https://clients2.google.com/service/update2/crx",

  "name": "Search YouTube™ Playlist",
  "version": "21.04.01",
  "description": "Search for videos in a YouTube™ playlist.",
  "background": {
    "scripts": ["/js/background.js"],
    "persistent": false,
    "pages": ["popup.html"]
  },
  "page_action" :
  {
    "default_title" : "Search this playlist",
    "default_popup" : "popup.html"
  },
  "icons": {
    "48": "/img/icon-48.png",
    "128": "/img/icon-128.png"
  },
  "permissions" : [
    "storage",
    "declarativeContent",
    "tabs",
    "identity",
    "http://www.youtube.com/*",
    "https://www.youtube.com/*"
  ],
  "oauth2": {
    "client_id": "104618134280-roirvkp72379ll5d19ej7gl7128l5jk9.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/youtube.readonly"
    ]
  },
  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAps65nbsGLdA55FuGZlpzPiZOdV+umwFK4gFOYnUDVcqp6NQ8OxGY5+qQ40tFlBgrwAbhCknHumgFQJyQBnYUhJNSO5macvXjXi1Fg6ZwWoaglQbbmXUWmXFsBq5DwR514qT/0ER70n35RpM1u7fgMGga8yHm3l3YjVRoEuN7qqHj1mRN3EbHnZUQbCT91JhZqfhaVkEEAvsznCZ3xbKDhCydSs5753cEk0tWeVFkTfE74FIoV9vi1nDHS2qjtcaNQSUmOTeBys6hZkXRgPDQl5NWwFd6xx85txQ4sbDMX0WNR9Qc/IAZlhigxaGr/UD0qTz0GpIRGU0KkNQEs/lw5wIDAQAB",
  "manifest_version": 2
}
 

Bug: "manifest_version": 2

• Error: couldn't retrieve YouTube API Auth Token

js/popup.js:12 (showError) js/popup.js:24 (anonymous function)

import spinner from './objects/spinner.js';
import playlistID from './data/playlistID.js';
import populatePopup from './functions/populatePopup.js';
import fetchBtn from './elements/fetchBtn.js';

window.videos = [];

function showError(message) {
    document.body.innerHTML = `
        <div class='error'>${message}</div>
    `;
    console.error(message);
}

(async function() {
    try {
        if (playlistID == "WL") {
            showError("Watch Later playlist is inaccessible due to privacy concerns. Thank you for understanding.");
            return;
        }

        await spinner.wrapAround(populatePopup);
    } catch(err) {
        showError(err);
    }
})();
 

Bug: console.error(message);

• Unchecked runtime.lastError: The user did not approve access.

Bug:: popup.html:0 (anonymous function)

Do you have any thoughts of using ChatGPT or other AI programs to help you in creating or troubleshooting codes/Python?

[hallzy]

I'll see if I have time to look at this over the weekend. If anybody else reading this wants to take a stab at it though feel free, as I'm not sure when I will be able to get to it.

I have used ChatGPT. Not for this project but other things and for work sometimes. Mostly because it is a convenient way to get (usually) pretty good answers to questions that may take a little bit longer to find on Google

[Suleman-Elahi]

It's not the problem with the code. Google has blocked access to the app. So, I think you need to host your own app now.

[anodynos]

Why and how has Google blocked it @Suleman-Elahi ? I dont think this is the case, it's just needs updating...

I tried following https://developer.chrome.com/docs/extensions/develop/migrate/manifest and the first few steps are easy

{
"update_url": "https://clients2.google.com/service/update2/crx",

  "name": "Search YouTube™ Playlist",
  "version": "21.04.01",
  "description": "Search for videos in a YouTube™ playlist.",
  "background": {
    "scripts": ["/js/background.js"],
    "persistent": false,
    "pages": ["popup.html"]
  },
  "page_action" :
  {
    "default_title" : "Search this playlist",
    "default_popup" : "popup.html"
  },
  "icons": {
    "48": "/img/icon-48.png",
    "128": "/img/icon-128.png"
  },
  "permissions" : [
    "storage",
    "declarativeContent",
    "tabs",
    "identity"
  ],
  "host_permissions": [
    "http://www.youtube.com/*",
    "https://www.youtube.com/*"
  ],
  "oauth2": {
    "client_id": "your-client-id.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/youtube.readonly"
    ]
  },
  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAps65nbsGLdA55FuGZlpzPiZOdV+umwFK4gFOYnUDVcqp6NQ8OxGY5+qQ40tFlBgrwAbhCknHumgFQJyQBnYUhJNSO5macvXjXi1Fg6ZwWoaglQbbmXUWmXFsBq5DwR514qT/0ER70n35RpM1u7fgMGga8yHm3l3YjVRoEuN7qqHj1mRN3EbHnZUQbCT91JhZqfhaVkEEAvsznCZ3xbKDhCydSs5753cEk0tWeVFkTfE74FIoV9vi1nDHS2qjtcaNQSUmOTeBys6hZkXRgPDQl5NWwFd6xx85txQ4sbDMX0WNR9Qc/IAZlhigxaGr/UD0qTz0GpIRGU0KkNQEs/lw5wIDAQAB",
  "manifest_version": 3
}

but then I get more errors:

'background.persistent' requires manifest version of 2 or lower.
'background.scripts' requires manifest version of 2 or lower.
'page_action' requires manifest version of 2 or lower.

and I suspect this need more work than I can afford right now...

Is there any chance Steven @hallzy ?

[hallzy]

Yeah, I've also been very busy and haven't gotten around to it.

From the looks of things, the entire background.persistent, background.scripts, and page_action in Manifest V2 is deprecated

So, the background.js file would basically have to become a service-workers.js file, and then all of the listeners in it have to change and be updated

The background object should be:

"background": {
    "service_worker": "background.js",
    "type": "module"
}

page_action changed to action

Haven't actually tried any of this yet... I'm at work and don't have the time to debug it if it doesn't work right now. Hopefully it is as easy as that though

[anodynos]

Thanks Steven!

We would love it if you could spend some time and push the changes on a new branch, I can then test and debug it if needed.

[sagarpatel288]

The solution that worked for me:

Update the manifest.json as below:

{
  "update_url": "https://clients2.google.com/service/update2/crx",
  "name": "Search YouTube™ Playlist",
  "version": "21.04.01",
  "description": "Search for videos in a YouTube™ playlist.",
  "background": {
    "service_worker": "/js/background.js",
    "pages": [
      "popup.html"
    ]
  },
  "action": {
    "default_title": "Search this playlist",
    "default_popup": "popup.html"
  },
  "icons": {
    "48": "/img/icon-48.png",
    "128": "/img/icon-128.png"
  },
  "permissions": [
    "storage",
    "declarativeContent",
    "tabs",
    "identity"
  ],
  "host_permissions": [
    "http://www.youtube.com/*",
    "https://www.youtube.com/*"
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "oauth2": {
    "client_id": "your client id",
    "scopes": [
      "https://www.googleapis.com/auth/youtube.readonly"
    ]
  },
  "key": "Existing key",
  "manifest_version": 3
}

Replace the below line for the popup.html

<script type='module' src="/js/popup.js"></script>

with

<script type='module' src="js/popup.js"></script>

cc: @hallzy