Fixed the style and embed details, so they work properly now.

Have got content page to “run_at” : “document_start”, which basically makes the fonts render earlier, and so when a new page is loaded it may even load with the google fonts immediately available.

So it is pretty much finished now. Do I want to add a page to show the different domains I have saved?


Google Font App – merged details page, tried font size changing.

The font size changing does not really work well on website.

To change all the fonts proportionally we have to have to loop through each of the elements, and increase their size individually. For large pages, like wiki pages, this is really slow and causes a lag.

Even on smaller pages, increasing all the font size starts making the page look weird. A much better solution is just to zoom into the page. It keeps the spacing and positioning of the page items much better.

Once solution would be to apply a single font size to all element. That would be easy, a single just put a style tag with the * selector, and !important in the head. But then making all the fonts on the page the same size is kind of useless and not so elegant also.

So because changing the font size does not work very elegantly, and looks a bit scrappy and laggy when implemented, I will leave it out as a feature.

Now let me see if I can get the details page to show up within the font list, then no need to change pages for it.

Have got the details to show up within the font div when the user clicks on details, as oppose to creating a new page.

Need to:

  • Separate the embed fonts, and styles, so the user can click on embed, and styles, separately to get two different views.
  • Sometimes the detail fonts and not rendering in the correct fonts. Find out why.
  • Can increase size of font title on detail view.
  • Will be good for production once these things ready.

Also future features:

  • Have an undo button. Maybe if I build it with redux this will be possible as state changes are saved in a list
  • Have a page which shows which updated fonts are being used on each page. Sort of like a database view of all saved fonts.
  • Show which fonts pair well with the current font.

Filter sliders working

Number style filter working.

Now want to fix up the styling a little and it will be ready for next push.

Have put in a switch so that I can apply the changes to all pages, or just the one.

Finally, I need to put an option to persist the changes or not. So like whenever a tab is opened, those fonts will show.

This can be a checkbox.

To persist the changes, every time a tab is opened, it will need to apply the styles. So it is pretty straightforward. The function to apply the styles already exists on the contents page. I just need to save the font family, weight, and style somewhere (background page) and then apply them whenever a new page opens.

So I will have an object in the background page. Each object within it will be identified by a selector. Screen Shot 2017-03-23 at 10.27.37 PM

Details page fully working, and trying some web scraping

The details page is fully working. App reloads to details view if that was the last view before the popup closes. To do this I had to move more states to the applicationState object, since this is the object that is sent to the content page, and so the showDetails value is stored in it now, so the content page can update the popup on that.

Have hidden overflow of the detail variants text. So before it was moving to a new line if it couldnt fit. I resolved this by adding the following CSS:

  • text-overflow: ellipsis;
  • white-space: nowrap;
  • overflow: hidden;

The nowrap stops it moving to a new line, and the overflow:hidden hides any text tht goes over the div. Ideally I want any text that overflow to be truncated with a … , which is what the text-overflow:ellipsis is supposed to do, but for some reason that is not working. So I have just left it for now. The nowrap was an important enough find and will do for now.

Am now loading full set of Roboto fonts on load, because they are needed by material UI. When switching to the detail page, I noticed some text in the apply div was going bolder and causing a flash of unstyled fonts. This only happened in the Roboto detail, so bascially when the Roboto variants were donwloaded, the buttons and other icons were updating too. So have preloaded the full set of Roboto weights now, so these load correctly on start. Material UI didnt specify which weights were needed, as long as nowhere I could see, so I have just included them all now. Makes a much smoother transtion between the detail and main view, since the applyDiv, which is shared in both views, no longer reloads, so it looks a lot cleaner. 

Cleaned up the code more, and removed functions am not using. Moved the Google Filter Data (categories, varitans, languages, e.t.c.) to a separate file and am importing them on load, so the App.js looks cleaner.

Have pushed this new version to the store.

Will now work on scraping the Google Fonts page to get updated filters sets for weights, width and slant, and also to get the font pairs.

Things remaining to do on the UI is get the ellisis working on the font overlflow.

How the require method loads modules in Node.

Spent a while trying to crawl the google fonts page. It is actually not that simple because the fonts on the page are rendered using javascript, so if we donwload and then crawl the page, the fonts wont be included in the page source.

I tried this initially using requestJs, but this only gets the page source so it wasnt working. I also tried using a headless browser, phantomJs, to render the page, however the Google Fonts page blocks the headless browsers as it realises it is not a real browser. I also tried a python scrpaer, pyQt4, but the tutorial seemed outdated and i couldnt get it to work.

What make it touch also is the fonts only load on scroll. And the google font page will only ever have upto 20 font tiles in the DOM at any one time. It removes and adds the font tags from the DOM as your scroll. However the <style> tags for the different fonts remain.

I was testing at the end ways to extract the fonts from the page using the inspect console. Will try more on this tomorrow.

Background script added

12.30 pm : Fixed some bugs in the web font loading.

Loading the Lobster font seems to be giving errors. I have disabled that font for now.

Fixed the errors finally. Was loading the Lobster font as Lobster:400, which was givng errors on the font loader. So for all am now loading all regular variants as just the family name with no :400 attached. This seems to have fixed the issue. Also got rid of most of the Warnings

Lets add the favourites to a background scripts

6.45 pm Have added the background script so that the favourites are shared across all popups. Want to clean up the popup script a little now. To try and sort the render cycle so there is not a flash of the page before filtering. So that on open it renders the correct list straight away. It is especially slow for the favourites filter.

8.30 – cleaned up the script. It seems to be loading faster. ready for second version deploy.

Made the apply div show on all pages. Updated the styling a little.

Tomorrow need to get the details page to redisplay when the popup reopens if that was the last used screen.

Once I get that going, I can start building a scraper for the google fonts site to get the information that will allow people to filter the fonts based on slant, width, and thickness. And also to get the information for recommended pair fonts.

Once I get that, I can add those filters and data to the extension. Then it will be ready for final release.


Got the favourites star to show up as the same color. It had something to do with the asyncronicity of loading the state from the contents page. Strange though, because the Select states were updating in the UI, based on the state received from the contents page, but the favourites star was not updating in the same way.

Maybe because I was updating a styling element, or maybe because it is an SVG. Not sure exactly, but anyway what I did is update the color of the star from the container element. After the this.setState({applicationState:applicationState}) had been done, I updated the color of the star via jquery. All this carried out in the container element. Ideally we would want the styling for the favourites star to go in the favourites component, bur I tried doing this in several different way, including:

  • putting the style object as a variable in the script
  • putting the style object as a state variable in the component
  • inject the style color as a prop
  • puttng the style variabe inside the render(){} section.

It never worked properly. I am sure it had something to do with the asynchronous loading. But even if it is asynchronous, I would have though that if i injectjed the color as a prop, then when it