ChangeOrgWebExt

https://github.com/aleph1888/JavascriptRemoverWebExtension/wiki/Change.org

Current developing space

Branch changedotorg from current repository has been moved to notabug/aleph/ChangeOrgWebExt, same branch; this is due techy considerations about not using github.

See general overview on [[Change.org]].

This is building diary. Summer 2016.

Map

Source odg.

[Help here] Current break holes

1) Change.org API demands "an authorization key" to sign any petition. This is given on async callback endpoint service. So, how can this Firefox Webextension provide a callback? See: petitionGET(objSignatureData). For now we are followuping the request.

Basic on WebExtensions applied to ChangeOrgWebExt

WebExtensions Port

A Port object provides a dedicated messaging channel between two specific endpoints.

You can use a Port to communicate:

• within your extension (for example, between content scripts running in a particular tab and your extension's background scripts)
• with other extensions
• with web pages.

You create a Port object by calling runtime.connect() or, if you are connecting to content scripts running in a tab, by calling tabs.connect().

You create a Port object by calling [runtime.connect()](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Runtime/connect) or, if you are connecting to content scripts running in a tab, by calling [tabs.connect()](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Tabs/connect).

The other end can listen for the new port using runtime.onConnect for intra-extension ports, or runtime.onConnectExternal for extension-to-extension or page-to-extension ports.

ChangeOrgWebExt - ChangeJS API

Just as commanded above, cloned engine/change-js-api. TODO: Could use it as ''git submodule''!

ChangeOrgWebExt - Ports

Background

engine/background.js

Actions provided:

List petitions.

Input {page limits}

Load petition.

Input {signer data, petition url} Does: {API query to change.org server} Output {Authorization key for given petition, petition sign form data}.

Sign petition.

Input {signer authorization key for given petition, petition id}

Network actions:

Change.org API Reference

Load petitions list.

var client=new ChangeOrgApiClient({
	api_key	: 'YOUR_API_KEY',
	secret 	: 'YOUR_SECRET_KEY'
});

var petition=new ChangeOrgApiPetition(client);

petition.setCallback(function(response) {
	console.log(JSON.stringify(response.getData()));
});

petition.getPetitions({
	petition_ids: '1234567,7654321',
	fields: 'title'
});

// Console Output:
// {"page":1,"prev_page_endpoint":null,"next_page_endpoint":null,"total_pages":1,"petitions":[{"title":"A Petition to Petition"},{"title":"Save the Clock Tower!"}]} 

Load a single petition by url

petition.getPetitionId('http://www.change.org/petitions/save-the-clock-tower',function(response) {
	console.log(JSON.stringify(response.getData()));
});

// Console Output:
// {"result":"success","petition_id":1234567} 

Authorize and sign

var client=new ChangeOrgApiClient({
	api_key	: 'YOUR_API_KEY',
	secret 	: 'YOUR_SECRET_KEY'
});

var petition=new ChangeOrgApiPetition(client);
var auth=petition.getAuthorization();

auth.setPetitionId(1234567)
	.setRequesterEmail('requester@gmail.com')
	.setSource('http://www.myblog.com/sign-the-petition')
	.setSourceDescription('My Blog')
	.setCallback(function(response) {

		console.log(JSON.stringify(response.getData()));

		if(response.getData('status')=='granted') {
			petition.addSignature({
				petition_id 	: 1234567,
				auth_key 		: response.getData('auth_key'),
				source 			: 'http://www.myblog.com/sign-the-petition',
				email 			: 'requester@gmail.com',
				first_name 		: 'John',
				last_name 		: 'Doe',
				address 		: '123 Any St.',
				city 			: 'Beverly Hills',
				state_province 	: 'CA',
				postal_code 	: '90210',
				country_code 	: 'US',
				phone 			: '5555555555',
				reason 			: 'I support this petition!',
				hidden 			: true
			},function(response) {
				console.log(JSON.stringify(response.getData()));
			});
		}

	});

auth.authorize();

// Console Output:
// {"auth_key":"YOUR_AUTH_KEY","petition_id":1234567,"requester_email":"...","source":"...","source_description":"...","status":"granted","result":"success"}
// {"result":"failure","messages":["user has already signed the petition"]}

Load Bar UI Content

engine/contentscript.js

• loadbar/ui.html -loadbar/ui.css
• loadbar/ui.js

Port transmision sequence

• User shows...

... ChangeOrgWebExt Load Bar (A) by clicking on browser toolbar button (B).

• User fills...

... petition load form (C) and submits (1).

• Background (D) receives...

... order to load petition (2). Swipes to API Change.org server (2.1) and messages contentscript (E) with petition signin form data (2.2) and proper authorization key (2.2).

• User gets...

... data on petition sign form (F). Submits signin order (3).

• Background receives...

... order to sign petition (4). Swipes to API Change.org server and messages contentscript to reset the forms (5) and notify commit.

UI Layout

• Header. Height = 50%
• Signer data form & petition search bar. Height = 10%.
• Petition widget. Height = 40%.

Header

Petitions list. Dropdown.

Elements:

• List: Petitions (one page).
• Paragraph: Pager buttons.

Events:

• Message: == > 'list-load-pick'

Signer data form & petition search bar

Load petition url from Change.org API, while prepares authorization key with signer data form.

Elements:

• Form: SignerData {email, firstName...}
• Input Url: PetitionUrl
• Input Submit: Send data.

Events:

• Message: ==> button-load-click

Petition widget

Sign petition form.

Elements:

• Form (readonly): PetitionsData {title, pic, description, ...}
• Form: SignData {signer, key, reasons,...}
• Input Submit: Sign petition.

Events:

• Message ==> button-sign-click