http://stackoverflow.com/questions/9942594/unicodeencodeerror-ascii-codec-cant-encode-character-u-xa0-in-position-20

https://docs.python.org/3/howto/unicode.html

https://developer.chrome.com/extensions/xhr

http://stackoverflow.com/questions/4308670/how-can-i-estimate-the-disk-size-of-a-string-with-javascript

https://www.joelonsoftware.com/2003/10/08/the-absolute-minimum-every-software-developer-absolutely-positively-must-know-about-unicode-and-character-sets-no-excuses/

http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-

https://daveceddia.com/ajax-requests-in-react/

http://stackoverflow.com/questions/40512815/how-to-use-react-setstate-with-chrome-api

component-classes/

chrom apps ge make cross page requests

string to long for get request. Needed to use post.

Ok have finally got this working. Am sending the page to the webserver, the webserver is parsing it and sending back the text, and the extension is finding and returning the keywords in the text.

So now the core functionality of the extension is basically working. It is extracting the keywords from a webpage. The conversion takes a while because the body string can be as large as 1MB, if not more, so sending that file to the server, and then sending one back of equal size, takes about 18 seconds round for a 1MB file. That is a long time to wait. For a small page eg a google search page, it takes around 2 – 3 seconds for turnaround.

I thought of some options to work around this:

  1. Do the keyword filtering server side. Then the return object would only be the list of keywords, which would be much smaller, so this could cut the turn around time by half.
  2. Chop up the initial body text string into smaller bits, and send each one separately. When each of the responses comes up, can start displaying the keyword for that section only, with the keywords updating as more of the text is processed. The at least the user would see keywords appearing, so they would be getting ‘instantaneous’ feedback, instead of waiting for the whole page to process before seeing anything. Could even combine this with Idea (1) for even faster responses.
  3. Send only the URL Link of the Tab to the server, and let the server retrieve the webpage itself. This is how I started, and it seemed to be faster. However sometimes the server could not access the same page, e.g. login credentials may be needed. So perhaps could run the script to check if it can retrieve the page,a, and if it gets an HTTP Error, to fallback to requesting the entire body text from the Extension.

However I  can work on speeding it up a bit later. Now that I have the keywords generation working, I want to work on setting up the aesthetics, and the highlighting within the page. This is where React will start coming into the application.

So will move everything to the Chrome-React-Rdux boilerplate, and tell webpack to build only the popus js for now. That is where the react will start. Will keep content, and background scripts as raw javascript for now.

Spend ages till figured had to use .bind(this) on the chrome.runtime function which was running inside componentDidUpdate(). Otherwise it was not letting the chrome.runtime function access all the other methdos in the react component. It was saying those functions did not exist every time I referred to them.

Also, using the ES6 convention for functions in the AJAX call success method allows you to use the ‘this’ from the React component also. If you just write success: function(response){this.setState({…})} it will not let you call the setState method as it says it does not exist. You have to write it as success: (response) => {this.setState({…})}, as using the arrow function syntax brings in the ‘this’ component of the parent object with it.

Am doing well. Need to implement the mark.js highlight all function in popup.js.

Need to make the keywords object like so

keyword = {

keyword:keyword,

Frequency:frequency,

highlighted:highlighted

http://stackoverflow.com/questions/5913927/get-child-node-index

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