Support Ecosia Search Engine

[dchakro]

Ecosia is my choice of search engine and I decided to code support for it. The extension builds on my mac and gets installed on Vivaldi for me and connects to my linkding extension and supports both light and dark mode on ecosia. Here's a screenshot of it in dark mode.

Looking forward to integration of this PR and release of official extensions with support for Ecosia.
P.S. I haven't tested building for manifest V2

[Fivefold]

Hey @dchakro, thank you for taking the time to create a PR! Your screenshot looks great.
Please be patient, as I'm very busy at the moment, and can't properly test and review your changes. I'm afraid I can't give an ETA. A few questions until then:

1. Since I don't personally use Ecosia but you do, can I assume you would be willing to handle ecosia-related fixes in the future, e.g. if ecosia changes their html?
2. Have you verified your changes work on firefox as well? I need to support firefox as well as chromium-based browsers.
3. You added a screenshot for dark mode. Did you check if light mode works as well?
4. Did you check the various permutations in theme settings (e.g. setting ecosia's theme to light but injector theme to dark, setting injector theme to auto detect and ecosia to system theme, changing the system theme to light and to dark)?
   Here is a table for the various permutations, with ecosia theme settings horizontally and injector theme settings vertically:

	System (Light)	System (Dark)	Light	Dark
Auto
Light
Dark

[dchakro]

Hi @Fivefold,

1. Yes, I can cover Ecosia.

2. Tested to work on firefox. Had to build by declaring "scripts": ["build/background.js"] in the manifest.json

3. Light mode works as well.

4. Thank you for sharing the matrix. These were the results of my testing on macOS.

	System (Light)	System (Dark)	Light	Dark
Auto	Y	Y	Y	Y
Light	Y	Y	Y	Y
Dark	Y	Y	Y	shows light

[Fivefold]

Hey @dchakro, sorry I haven't been able to test the code yet. I haven't forgotten about your PR. I hope I will get to it next weekend.

[Fivefold]

Sorry @dchakro for the long delay, I'm much more busy than anticipated!

I found some time to pull and test your changes, here are some observations:

1. I've found a way to use the same manifest.json in firefox and chrome: declare both a background script and a serivec worker:

  "background": {
    "service_worker": "build/background.js",
    "scripts": ["build/background.js"]
  },

Firefox ignores the service_worker and chrome ignores the scripts property. Chrome will give an error if you load the extension in the dev mode but it should work fine. Firefox actually recommends this approach for cross-browser extensions. Can you check if this works on macOS as well?

2. On firefox injection into ecosia works flawlessly, but on chrome I can hardly get the injection box to show up most of the time. Sometimes it briefly shows for a fraction of a second and then disappears. I suspect the issue is that ecosia updates/overwrites the sidebar a short time after the DOM loads and removes the injection box that way. I've had similar issues with Brave and Qwant. With quant I implemented a MutationObserver, that waits for the sidebar to exist before injecting. Something similar could be done here.
   
   I suppose you didn't notice this issue during your testing on macOS?
3. Design-wise, I usually try to somewhat adapt the injection box to the style of the sidebar (while still keeping the colour theme from linkding for the links and tags).
   Currently you have the "default" style, which is already quite close to the style of ecosia in the light theme (but has a shadow whereas ecosia does not). The dark theme however is rather different.
   
   Consider adding some styles in injecitonBox.scss to make this closer. I noticed you added some variables in variables.scss but do not use them.

[dchakro]

but on chrome I can hardly get the injection box to show up most of the time.
That is intertesting! I use Vivaldi, a chromium based browser so I haven't tried it on Google Chrome. I will try it this weekend and fix the color schemes as well. Thank you for going through this!