FactPub Chrome Extension - Developer's Guide -

18
FactPub Chrome Extension - Developer’s Guide - Genome Institute of Singapore Sun Sagong 2017Feb27

Transcript of FactPub Chrome Extension - Developer's Guide -

FactPub Chrome Extension- Developer’s Guide -

Genome Institute of Singapore

Sun Sagong 2017Feb27

What is FactPub Chrome Extension ?

• FactPub chrome extension is a browser extension that helps fact donors to extract facts from PDF files on chrome browser and upload them to FactPub website – http://factpub.org/

• FactPub aims to break down the paywall for academic papers by uploading ‘facts’, not original copy-right protected PDF papers.

• A Java program, released under the name of Factify, is used to extract facts from PDF. Thus the extension is designed to interact with it.

Factify - invisible process

Upload JSON file

FactPub Chrome Extension

background.js- calls FactifyChrome.jar

General Architecture

Local User PC

FactPub - http://factpub.org/

Server side process

Extract facts

Passing PDF file

Send status notifications

Generate Page in WikiReturn page URL

Folder structure for FactPub chrome extension

Manifest file (JSON file)

Main code (JavaScript)

Manifest file – manifest.json (1/2)https://github.com/pauline-ng/factify_chrome_extension/blob/master/manifest.json#12-34

• Every chrome extension has a JSON-formatted manifest file that provides important information to configure the extension.

Detailed explanation is given by Google - https://developer.chrome.com/extensions/manifest

Specify the files that are used when the extension icon is clicked.

Chose ‘background.js’ file as a main JavaScript code file.

Grant necessary permissions because chrome extension works with limited API control for security reason.

Manifest file – manifest.json (2/2)https://github.com/pauline-ng/factify_chrome_extension/blob/master/manifest.json#1-15

• The first field of the manifest.json file - ‘key’ – is critical for modifying windows registry to launch external program (Java) from chrome browser.

This hash value generate the folder name where extension is going to be saved.It must be always the same because installer – will be explained later – need to write a folder location into windows registry key.

Main code – background.js (1/7)https://github.com/pauline-ng/factify_chrome_extension/blob/master/background.js#26-41

• Upon installation, the instruction page is displayed and downloading of the Factify installer starts.

Main code – background.js (2/7)https://github.com/pauline-ng/factify_chrome_extension/blob/master/background.js#77-87

• Code to check whether the page being browsed is PDF file or not.

Get header information

Analyze header information

Main code – background.js (3/7)https://github.com/pauline-ng/factify_chrome_extension/blob/master/background.js#140-172

• Load page information whenever user browses a web page.

Using XMLHttpRequest background to handle page data

Detecting PDF

Sending user activity data to server – e.g. page url

Main code – background.js (4/7)https://github.com/pauline-ng/factify_chrome_extension/blob/master/background.js#174-200

• Show desktop notification if the page is PDF

Creating desktop notification message with some properties.

Detailed explanation is given by Googlehttps://developer.chrome.com/apps/notifications

Main code – background.js (5/7)https://github.com/pauline-ng/factify_chrome_extension/blob/master/background.js#245-270

• If user click the first button (Yes), starting extraction process by calling Factify

Serialize PDF data into JSON format so Factify can process it.

Pass data

Update desktop notification message.

Main code – background.js (6/7)https://github.com/pauline-ng/factify_chrome_extension/blob/master/background.js#312-328

• The code within connectNativeApp() function – Establishing port with Chrome Extension

Establishing connection with Factify

Add an event listener for the time when connection is closed.

Detailed explanation is given by Googlehttps://developer.chrome.com/extensions/nativeMessaging

Main code – background.js (7/7)https://github.com/pauline-ng/factify_chrome_extension/blob/master/background.js#376-401

• Adding event listener for receiving messages from Factify – This part is called when Factify send messages

Update desktop notification messages based on statusesresopnded by Factify

Installerhttps://github.com/pauline-ng/factify_chrome_installer

• An extra step must be taken to call external program (Java) from chrome browser due to its security policy.

• This installer makes a necessary modification for windows registry to allow Native Messaging protocol between the extension and Java.

Codes for windows installer

Factify - it must be built as an external .jar format and put under the root of factify_chrome_installer folder as _factify.jar.

Main code for installer

Configuration files required to run .jar from chrome browser

Installer – setup.nsihttps://github.com/pauline-ng/factify_chrome_installer/blob/master/install_scripts_win/setup.nsi

• Use NSIS (Nullsoft Scriptable Install System) for an windows installer builder - http://nsis.sourceforge.net/Simple_tutorials

Define registry key name and its values

Detailed explanation is given by Googlehttps://developer.chrome.com/extensions/nativeMessaging

The installer, including necessary configuration files and _factify.jar.

Write necessary registry value to specified registry key following documents by Google.

Installer – setup.exe (How to build)https://github.com/pauline-ng/factify_chrome_installer/blob/master/install_scripts_win/setup.nsi

• Just drug and drop NSI script file on NSI scripts compiler, then executable file will be created.

References for codes

• FactPub Chrome Extension – [JavaScript]https://github.com/pauline-ng/factify_chrome_extension

• Installer of Factify – [Windows bat script & NSI script]https://github.com/pauline-ng/factify_chrome_installer

• Factify – [Java]https://github.com/pauline-ng/factify/blob/master/src/main/java/org/factpub/factify/ui/extension/chrome/FactifyChromeMain.java

Useful References for Chrome Extension

• Getting Started Tutorial for Chrome Extension Development

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

• Desktop Notifications

https://developer.chrome.com/apps/notifications

• Native Messaging Protocol

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