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
[Help here] Current break holes
- 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()
.
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
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:
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
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