@startuml
!theme mars
!pragma teoz true
skinparam sequenceMessageAlign right

title Rotten Browser Extension Sequence Diagram
actor User as U

box "Browser"
box "Popup" #LightGreen
participant popup.html as P
participant popup.js as PS
end box

box "Active Tab" #LightBlue
participant webpage.html as W
participant content_script.js as CS
end box

participant background_script.js as BS
end box

{start} PS o--> P: Start Listening for Click Event
|||
|||
U o-> P: Click "Find Rotten Links" Button
& {end} P ->o PS: Receive Click Event
{start} <-> {end}: Listening

PS o-> CS++: browser.tabs.executeScript()
W ->o CS: Get All Links in Webpage

note left of CS
Sort links:
internalLinks
externalLinks.
endnote

note left of CS
Put both link lists
together in a message.
endnote

CS o-> BS--++: browser.runtime.sendMessage()

loop #1cf for link in internalLinks
BS -> BS: fetch(link)
note left
Call fetch on internal links,
and set their status codes.
endnote

BS -> BS: find(link)
note left
Call find on internal link
if status != 200 to highlight
them in the webpage.
endnote

BS o--> W: find.highlightResults()
end

note left of BS
Put links together in
a message with updated
status codes.
endnote

BS o--> PS--++: browser.runtime.sendMessage()
P ->o PS: Get Display 
 From DOM

note right of PS
Organize links by internal
and external categories,
showing the internal status
codes, and create elements.
endnote

PS o--> P--: Display Elements

U o-> P: Read Rotten Link Report
@enduml