I also struggled with this when I got started, but I shipped my first Safari Extension from this template!
See: https://themagichighlighter.com ⚡️
The thing that helped me was to edit the manifest.json file "content_scripts": [] configuration.
Here's an example:
{
"...": "...",
"content_scripts": [
{
"js": [ "common.js", "content.js" ],
"css": [ "content.css" ],
"exclude_matches": [],
"matches": [ "*://*/*" ],
"run_at": "document_start",
"all_frames": false
}
]
}
Just edit which js and css files are loaded and you should be able to see your code loaded on any/all pages.
The Mozilla documentation for manifest.json, content_scripts, and "Matching URL Patterns" were incredibly helpful for me:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts#matching_url_patterns
I hope this helps!