How to start writing an extension? What course of action would you recommend?

Question

Browser extensions

There is a task to write an extension for the Chrome browser.

I know how to create a config and run the extension, it would be interesting to know what actions need to be taken to write this extension more rationally

Requirements:
 The extension loads the list of sites at
www.softomate.net/ext/employees/list.json
 The list of sites is updated by the extension 1 time per hour, but not more often than 1 time per hour
 When a user visits a page from the list of sites (“domain” field),
show a message on the loaded page (“message” field)
 The message must be an injection of HTML code into the page
 The user should be able to close the message
 If the user closed the message - the message
should not be displayed on the next site load
 If the user did not close the message - the message
should be shown again on the next site load, but no more than 3 times per browser session
 Add an extension button to the browser toolbar
 Call a popup-window by clicking on the button
 Display the list of downloaded sites in the popup-window with the ability to navigate through the
sites

Answer 1

Start by reading the documentation .
In background.js:
in the initialization function (it will run when the extension is loaded) you reset the counters for sites where the posts were not viewed and shown 3 times.
You make a request for sites and update storage, apparently according to the principle: what is in the file is in the database, the rest is deleted.
Along the way, hang up a timer that will load and process data every N times.
Create a communication port with a context where you wait for a message
- for initialization, to which you answer whether you need to do something, i.e. climb into storage and check if there is a domain there, how many times you went to it. As a result, the context does its job.
- message that the message is displayed by the context to the user. Here you update the storage where you increase the impression counter.
- a message that the user has closed the message. Here you set that the user has viewed the message (in the repository).
Create a communication port with a bubble (pupup):
- a message to get a list of domains from storage.
Bubble (popup):
Upon initialization, it sends a message "I want links", builds a poking ul / li / a list, where when you click through the tabs API, you open a new tab with a link.
Context (context.js that is loaded on sites):
Load at document_end, connect to the communication port and send a message that such and such a domain is loaded. Wait for instructions in response.
Upon receipt, do nothing or display what you need in the DOM site, as a result, report that the message is shown and hang an event on the buttons that will inform bg that the notification has been displayed.
truncated.
Documentation:
- alarms timers
- run-time (messaging, communication)
- storage
- tabs