Add new Theme Color content feature

[noisysocks]

Asana Task/Github Issue: https://app.asana.com/0/0/1209837728974673/f

Description

Adds a new Theme Color content feature that lets the browser extract the color found in a <meta name=“theme-color”>.

This is based largely on #1561.

The content feature can be enabled like so:

"features": {
  "themeColor": {
    "state": "enabled",
    "exceptions": []
  }
},

The feature then will send themeColorFound messages, which follow this schema:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "title": "ThemeColorFound",
  "required": ["themeColor", "documentUrl"],
  "properties": {
    "themeColor": {
      "type": ["string", "null"],
      "description": "The theme color value, or null if not present"
    },
    "documentUrl": {
      "type": "string",
      "description": "The URL of the document"
    }
  }
}

Testing Steps

npm run test-int --grep theme-color

Checklist

Please tick all that apply:

• I have tested this change locally
• I have tested this change locally in all supported browsers
• This change will be visible to users
• I have added automated tests that cover this change
• I have ensured the change is gated by config
• This change was covered by a ship review
• This change was covered by a tech design
• Any dependent config has been merged

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	80230f1
🔍 Latest deploy log	https://app.netlify.com/sites/content-scope-scripts/deploys/67ee5867a5e80e000847c3da
😎 Deploy Preview	https://deploy-preview-1609--content-scope-scripts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

• Branch Name: pr-releases/pr-1609
• Commit Hash: 05d806ca627eedfcb215f5eae9386a76ff23fcee
• Last Updated: April 3, 2025 at 9:44:51 AM UTC
• Install Command: npm i github:duckduckgo/content-scope-scripts#05d806ca627eedfcb215f5eae9386a76ff23fcee

Please use the above install command to update to the latest version.

[github-actions]

[Beta] Generated file diff

Time updated: Thu, 03 Apr 2025 09:45:31 GMT

Android

    - android/autofillPasswordImport.js

• android/brokerProtection.js
• android/contentScope.js

File has changed

Chrome-mv3

    - chrome-mv3/inject.js

File has changed

Firefox

    - firefox/inject.js

File has changed

Integration

    - integration/contentScope.js

File has changed

Windows

    - windows/contentScope.js

File has changed

Apple

    - dist/contentScope.js

• dist/contentScopeIsolated.js

File has changed

[mgurgel]

Docs are working now: https://deploy-preview-1609--content-scope-scripts.netlify.app/documents/theme_color_monitor

[mgurgel]

I was going to ask why this needs to be added in all other tests but then I found this https://github.com/duckduckgo/content-scope-scripts/pull/1561/files#r2007736395 . Let's follow up on this with @shakyShane when he's back as this means new features such as this will have ever larger PRs.

[mgurgel]

Looks good 👍

@jaceklyp Will you be updating privacy-configuration as part of the Apple task or should we?

[jaceklyp]

LGTM!

[noisysocks]

Turns out we don’t need this, and I don’t want unused code in the repo, so will close the PR. We can re-open if we need it in the future. Thanks for the help and reviews!