Google Font App – Extension and App loading from same script & Data update from Content Page

11.15 – Ok so basically the selectors do work by just adding them normally after one another with the !important selector. The reason it didnt work automatically on the Google Results page is because it has a lot of nested tags, classes, and IDs so the selector ‘h3’ was not reaching the h3’s becaause they were also nested in a anchor link, which also had a class. By being more specific in our selectors, they do update the text.

So it essentially has to do with the specifity of our selectors, and the order we place the new style tags in. If the specificity is the same, the style tag which comes last will override the previous one. If it still dosent update the element, we need a more specific selector. This posts describes it well.

Lets implement the reset button now. It can find all the style tags with the class “active-fonts” and delete them.

11.35pm: resetting the elements was as easy as  $(‘.active-fonts’).remove() where ‘.active-fonts’ is the class name for each style tag added for the new fonts. Can just use the .remove() on the whole selection, no need to loop through the results of $(‘.active-fonts’) individually.

Now I should be updating the content page with the state of the popup, so that when the popup re opens, the content can send it information about the last state so that it opens in the same state as it closed.

This should be quite straight forward actually. The app in the popup page should have an object which defines the enitre state of the application. Each time a state changes this object is updated immediately, and then a Process is run to update the application view based on the new state. Can also send the content the new updated state.

So first thing is to check that the App is running like this, with a single object that defines the state of the application.

2pm : have made a new directory structure where the app and extension are coming from the same file, so I only have to use one to update the app and the extension. Have exported the chrome listeners out of the page, since they cause an error when building in the app mode.

4.15 pm  – ok the webpack builder and create react app server are now working properly when running from the same App.js file. So no I just have one file to work instead of moving between a separate extension and web app. Took some time to put together, but will defo be worth it, as now maintaining and updating the app will be much easier and faster. To switch between the builds I just have to comment/uncomment 2 lines from the App.js file.

Can create the state listener now.

6pm: All states updated from single function now complete.

7pm: working on updating the content page state and vice versa so that when a popup reopens, it goes to the last state.

10.30pm: the updating of states from the content page is pretty much working. It is working for all except the favourites updating is a little buggy. The number favourites doubles each time the popup is repopened. Also need to get the search query to show the last query.

Then I need to update the popup to use the font loader, then the application will be ready and I can focus on the styling.

Other thing I could do is look at viewport rendering.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s