Faced a big issue with the events. Was not displaying the event properly in chrome extension on the handleClick. It was working fine in a normal browser app, however as part of the extensions, popup.js was not picking up the event properly. It was registering an event, but no picking up the target properly. It would only pick it up sometimes. I had to hack around this to get it to work, though essentially the event is still not being registered properly by popup.js. Might be some interference between react and chrome. Maybe in the build process something is bugging it up, or maybe all the React id’s in the div are messing with it.

Finally got the extension fully working as it does in the app. The keywords are logging, and the ‘highlight all’, ‘show frequency’ and ‘select number of keywords’ options are all working properly and highlighting the keyword tags and the text in the page correctly.

So here I am and it is all working. I am feeling good right not. Still a few issues to fix. As well as faster rendering, I want the state on each page to be saved so each time the user opens the popup in that page, it has all the same options as when they closed it.

Maybe it will be as simple as retrieving the keywords object from the content page. Where it will be stored as a variable. Then the popup is configured based on that. So, the first thing the popup does is send a message to the content to ask if it has any keyword data, and if it does, it loads that state in the popup.

{this.props.showFrequency ? keyword.keyword + ” | ” + keyword.frequency : keyword.keyword }

Ok have got the popup to show the last saved state. Basically store the required info in the content script, and the popup checks and preloads the data stored in the content script if it exists. These are the data being stored in each content scripts:

var keywords = [];
var keywordsRaw = [];
var highlightAll = false;
var showFrequency = false;
var numberKeywords = 10;

Ok, so how can I get it faster now. Lets try split the query to the server into 10 steps. So I will cut the string in 10 pieces, and query each one separately, and update the key words each time.

Need to add loading icon fir highlighting, because highlighting takes a while on big pages. Also look at extracting keywords on server. Also to send server the pages in steps for faster rendering. Then some final css on the popup, and done!

 

Faced a big issue with the events. Was not displaying the event properly in chrome extension on the handleClick. It was working fine in a normal browser app, however as part of the extensions, popup.js was not picking up the event properly. It was registering an event, but no picking up the target properly. It would only pick it up sometimes. I had to hack around this to get it to work, though essentially the event is still not being registered properly by popup.js. Might be some interference between react and chrome. Maybe in the build process something is bugging it up, or maybe all the React id’s in the div are messing with it.

Finally got the extension fully working as it does in the app. The keywords are logging, and the ‘highlight all’, ‘show frequency’ and ‘select number of keywords’ options are all working properly and highlighting the keyword tags and the text in the page correctly.

So here I am and it is all working. I am feeling good right not. Still a few issues to fix. As well as faster rendering, I want the state on each page to be saved so each time the user opens the popup in that page, it has all the same options as when they closed it.

Maybe it will be as simple as retrieving the keywords object from the content page. Where it will be stored as a variable. Then the popup is configured based on that. So, the first thing the popup does is send a message to the content to ask if it has any keyword data, and if it does, it loads that state in the popup.

{this.props.showFrequency ? keyword.keyword + ” | ” + keyword.frequency : keyword.keyword }

Ok have got the popup to show the last saved state.

Basically store the required info in the content script, and the popup checks and preloads the data stored in the content script if it exists. These are the data being stored in each content scripts:

var keywords = [];
var keywordsRaw = [];
var highlightAll = false;
var showFrequency = false;
var numberKeywords = 10;

Ok, so how can I get it faster now. Lets try split the query to the server into 10 steps. So I will cut the string in 10 pieces, and query each one separately, and update the key words each time.

Need to add loading icon for highlighting, because highlighting takes a while on big pages. Have now implemented an css loading animation. Also look at extracting keywords on server. Also to send server the pages in steps for faster rendering. Then some final css on the popup, and done!

 

 

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