Connecting the Extension Popup to the Webpages

[roryeiffe]

Right now, the pop-up lets the user select spoiler thresholds and pick a color for the spoiler blocks. However, these values aren't actually integrated with the rest of the extension. This can probably be achieved with message passing.

[roryeiffe]

Using this documentation, I was able to set up simple message passing between App.js and background.js and between background.js and content.js. Basically, when the user selects their color/threshold values in the extension, they pass that to the background where it can be stored. And when the user loads a page, the content script sends a request for the color/threshold values from background.js. The only issue right now is that the value isn't being properly stored in background.js. I think that is because once the extension stops sending messages, the connection ends and the values are erased. I will keep working on this and find a way to send the values properly.

[sacrael]

Working off of your implementation, I added state change management with useEffect to send the message to the active tab whenever the user changes color in the extension popup. https://github.com/roryeiffe/Spoiler-Block/blob/f159076a3be018f96ec1814c885c9c227e70f1a3/src/App.js#L30

Additionally, whenever the extension is loaded, it will load the color from the local storage, and when the color changes, it will be stored in local storage. ( https://github.com/roryeiffe/Spoiler-Block/blob/f159076a3be018f96ec1814c885c9c227e70f1a3/src/App.js#L66 and https://github.com/roryeiffe/Spoiler-Block/blob/f159076a3be018f96ec1814c885c9c227e70f1a3/src/App.js#L53 ).

Next thing to do: Whenever a tab loads a page, it needs to request the current active color from the background script, because otherwise, it will only update the active color when the popup is clicked.

[SerenaChen1]

Now that we have the message passing down, I was able to change the color of the spoiler censors. But there's an issue with how we initialize the color in our state. We want to fetch the color from local storage if it exists but default it to red otherwise. However, now, every time the popup component opens/mounts, the color is reset to red. So this is something we'll have to work on.

[sacrael]

I refactored the sequence of messages sent so that the color is requested when the page loads, and any changes to the color is sent to all tabs.

I tried to save the color in local storage of the popup extension, but since that only loads when the user clicks the popup, it would be better to store the color in the local storage for the background script. That way, it does not require to user to click the popup to retrieve the stored color.

TODO: When the background script first loads, get the color from local storage. If no color is set, choose a default color. Whenever the background script receives a message with a new color, update the local storage with that color and send the updated color to all of the tabs.

[sacrael]

Color is now being saved in the background.js script and updates appropriately.

Now, the enabled/disabled state needs to be stored in the background script and update when the user clicks the toggle on the popup.

[SerenaChen1]

I noticed that the censor color is always red when the webpage first loads and takes about a second to change to the color in the local storage. I realized this was because of the css, so I just got rid of those lines.

I also saw that in our popup, the border didn't update when we selected a different color and then refreshed the page. My first attempt to fix this was to add the call in App.js to get the color from local storage and pass it into the colorPicker component, but this would just get null on load because we technically initialize it to null. I ended up adding a call to fetch the color from the local storage in the colorPicker component to fix this issue.