(Bug): Can't develop Chrome extension

[RyannDaGreat]

Browser

Chrome

Browser Version

Version 99.0.4844.74 (Official Build) (x86_64)

Extension or Userscript?

Extension

Extension/Userscript Version

Commit 39c3b49c7c1d91fdc4a7495ce1f006e53619672d

Video link where you see the problem

N/A

What happened?

How do I run this extension from Github in Chrome? I'd like to help develop it, but I'm new to Chrome/Firefox extension development.

When I follow the steps in the contribution guide, the extension doesn't appear in my Chrome browser.

How to reproduce/recreate?

I followed the steps here: https://github.com/Anarios/return-youtube-dislike/blob/main/CONTRIBUTING.md

Then, I got this output:

➜  return-youtube-dislike git:(main) npm start

> return-youtube-dislike@2.0.0 start
> echo To build for development, please use "npm run dev". To build for production, please use "npm run build".

To build for development, please use npm run dev. To build for production, please use npm run build.

➜  return-youtube-dislike git:(main) npm run dev

> return-youtube-dislike@2.0.0 dev
> webpack --mode=production --watch

<i> [FileManagerPlugin] copied "./Extensions/combined/dist/**.js" to "./Extensions/combined/dist/firefox/
<i> [FileManagerPlugin] copied "./Extensions/combined/dist/**.js" to "./Extensions/combined/dist/chrome/
assets by path chrome/ 30.5 KiB
  assets by path chrome/_locales/ 6.29 KiB 8 assets
  assets by path chrome/icons/ 14.3 KiB 4 assets
  assets by path chrome/*.css 4.51 KiB 2 assets
  + 2 assets
assets by path firefox/ 30.3 KiB
  assets by path firefox/_locales/ 6.29 KiB 8 assets
  assets by path firefox/icons/ 14.3 KiB 4 assets
  assets by path firefox/*.css 4.51 KiB 2 assets
  asset firefox/popup.html 4.57 KiB [compared for emit] [from: Extensions/combined/popup.html] [copied]
  asset firefox/manifest.json 702 bytes [compared for emit] [from: Extensions/combined/manifest-firefox.json] [copied]
assets by path *.js 26.6 KiB
  asset ryd.content-script.js 13 KiB [compared for emit] (name: ryd.content-script)
  asset ryd.background.js 7.47 KiB [compared for emit] (name: ryd.background)
  asset popup.js 6.14 KiB [compared for emit] (name: popup)
orphan modules 12.8 KiB [orphan] 5 modules
cacheable modules 27.7 KiB
  ./Extensions/combined/ryd.content-script.js + 5 modules 14.2 KiB [built] [code generated]
  ./Extensions/combined/ryd.background.js 7.38 KiB [built] [code generated]
  ./Extensions/combined/popup.js 6.06 KiB [built] [code generated]
webpack 5.70.0 compiled successfully in 387 ms

However, when I open chrome, I can't find the Return Youtube Dislike extension in chrome://extensions/

System info: I'm using macOS Catalina, Chrome Version 99.0.4844.74 (Official Build) (x86_64)

(I suspect this might not be a bug, but a gap in documentation or a lack of knowledge on my part - but I'm not sure where else to ask this question so I'm writing this issue as a bug)

What am I doing wrong?

[sy-b]

Are you loading from Extensions\combined\dist\<chrome/firefox> ?

[RyannDaGreat]

I'm not sure what you mean...but I have a guess... After a bit of googling I found out you need to go to chrome://extensions then click Load Unpacked then select the [path to github repo]/Extensions/combined/dist/chrome folder This wasn't in the document at CONTRIBUTING.md though (maybe they just assume you know this?)

[sy-b]

(maybe they just assume you know this?)

yes

[RyannDaGreat]

Should I make a PR that adds this information? Others might be confused and too afraid to ask

[sy-b]

Others might be confused and too afraid to ask

I don't think. Anyone who knows how to build extension will be knowing this

Should I make a PR that adds this information?

I don't know. Maybe yes.

[RyannDaGreat]

(My thought process: It's probably obvious to anyone who's ever worked on a chrome extension before...but I'm a newbie lol, and I'm sure there are other newbies out there too)

Ok, I'll add some info about this! (I don't know how to do this with firefox yet, but I'll add that too when I figure it out)

[sy-b]

For FireFox

• For normal use about:addons --> ⚙ --> Install Add-on from file

• For debugging about:debugging#/runtime/this-firefox --> Load Temporary Add-on..

[RyannDaGreat]

I can't get that to work...unlike Chrome it doesn't let me select the dist/firefox folder, and all the files in all of its subdirectories are greyed out (I can't select them).

[RyannDaGreat]

I found a janky workaround though... If you go to about:debugging then select "Load Temporary Add-On" then select a random arbitrary file in dist/firefox it will load the extension until you restart firefox

[sy-b]

until you restart firefox

You can also press 'Remove' to do that

[RyannDaGreat]

Do you know how to install it and keep it even after you restart firefox? Or is temporary the way to go (Chrome's is persistent, but right now the only solution I have for firefox is not persistent across restarts) (By the way, I added screenshots to show you what I mean)

[sy-b]

refer: https://extensionworkshop.com/documentation/publish/package-your-extension/

[RyannDaGreat]

Hmmm...yeah the build process doesn't create a zip file automatically. I think I'll refer people to the temporary method, because I think that will (hopefully) update the code when re-building without needing to manually select a zip file again

[cyrildtm]

Welcome! and it's great to see you are interested in contributing!

Using the developer mode in both Chrome and Firefox is the presumed way for developing extensions. It's unnecessary to pack it every time you change a line of code. "Loading temporarily" is not a janky way; it is the right way.

Installing extensions from files (effectively sideloading) has been made harder and harder recently, because malicious program makers are abusing this easy workaround. Not saying you are, but in general. Just do it the common way.

There are other places with abundance of guidance information on how to make browser extensions. I think it's not this project's mission to provide a beginner's guide, although a couple of links can be helpful and get interested people engaged.

A skill barrier is a good and effective way to make sure you know what you are doing before creating a pull request. Not sure if this is Anario's intention as contributing.md was written really short and stopped half way. But there are other communities that are more aggressive and say if you can't figure out how to do the logistic stuff then probably you may want to learn it first.

To be fair, this is a bottom line requirement. Once you've been through this step for the first time, you will become more familiar and used to it. So you have made chrome extensions before as I see from your public profile. Maybe you just forgot how?

[RyannDaGreat]

Hey @cyrildtm ! I actually just got a new feature merged (support for YouTube Shorts) lol. This was all in the span of two days - I had never touched chrome extensions before! I learned a lot lol...

That being said, sy-b's answers here were critical to me being able to contribute, and the hassle of having to read between the lines in the ReadMe is indeed a barrier. That skill barrier is easily taught in a few minutes though, once you know how to do it - so I think it's a good idea to encourage newbie contributors instead of trying to ward them off by withholding information lol

[Anarios]

@RyannDaGreat, if you feel like adding things that you had difficulties with to contributor.md - go for it :)

I just didn't have time for good docs.

[cyrildtm]

This was all in the span of two days - I had never touched chrome extensions before! I learned a lot lol... the hassle of having to read between the lines in the ReadMe is indeed a barrier. That skill barrier is easily taught in a few minutes though, once you know how to do it

I feel you. But honestly this is quite common, that the beginner's learning curve is brutal. Not only in extension development, not even in the software industry. It's really up to how much time and effort you want to spend on the starter's guide, prettify it and make it attractive. Many times it's just not worth too much attention.

[RyannDaGreat]

Hey @Anarios , I've added a tutorial on all this :) (It's in a PR)

[cyrildtm]

Merged -- close this.