Skip to content
This repository has been archived by the owner on Apr 2, 2019. It is now read-only.

Use ports to avoid race condition #18

Merged
merged 1 commit into from
Dec 8, 2017
Merged

Use ports to avoid race condition #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 58 additions & 84 deletions addon/webextension/background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@


// constants used by particular effects
const WORDS = "dark army distintigration data privacy internet delete".split(/\s+/);
const WORDS = "dark army disintegration data privacy internet delete".split(/\s+/);
const XHEADERSITES = ['<all_urls>'];
const XHEADERNAME = 'dontdeleteme';
const XHEADERVALUE = '1057'
Expand All @@ -33,140 +33,114 @@ class PersistentPageModificationEffect {
if (!CSS) CSS = `
.donotdelete {
transform: scaleY(-1);
/* scaleY does not work for inline elements */
display: inline-block;
}

.donotdelete-tooltip {
display: inline-block;
transform: scaleY(-1) translateY(50%) !important;
position: absolute;
visibility: hidden;
background: #e9e9eb;
padding: 4px;
font-size: 12px;
font-weight: normal;
min-height: 50px;
max-width: 100px;
min-width: 100px;
padding: 5px;
text-align: center;
border-radius: 3px;
border: 1px solid #bebdbd;
box-shadow: var(--standard-box-shadow);
color: black;
z-index: 50 !important;
/* Neutralizing styles */
transform: scaleY(-1) translateY(50%);
color: black !important;
text-shadow: none !important;
line-height: 16px !important;
font-family: sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
background-color: #e9e9eb !important;
letter-spacing: 0 !important;
text-transform: none !important;
}

.donotdelete-tooltip a {
color: blue !important;
text-decoration: underline;
text-decoration: underline !important;
font-weight: normal !important;
}

/* Show the tooltip when hovering */
.donotdelete:hover .donotdelete-tooltip {
visibility: visible;
z-index: 50;
/* Neutralizes case where <a> have after pseudoelements like ">>" */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wow, this can happen! Jiminy. Good catch!

.donotdelete-tooltip a::after {
display: none;
}

/* Dynamic horizontal centering */
[data-tooltip-position="top"],
[data-tooltip-position="bottom"] {
left: 50%;
transform: translateX(-50%);
/*
* Ensures hover effect is always on top; needed when two or more
* match words with hover effects occur directly next to one another
* in a given text node
*/
.donotdelete:hover {
z-index: 999 !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch.

}

/* Dynamic vertical centering */
[data-tooltip-position="right"],
[data-tooltip-position="left"] {
top: 50%;
transform: translateY(-50%);
/* Show the tooltip when hovering */
.donotdelete:hover .donotdelete-tooltip {
visibility: visible !important;
}

[data-tooltip-position="top"] {
bottom: 100%;
margin-bottom: 0;
/* Vertical centering */
[data-tooltip-position] {
top: 50%;
/*
* transform: translateY(-50%);
* (if we weren't already transforming this element)
*/
}

[data-tooltip-position="right"] {
left: 100%;
margin-left: 0;
}

[data-tooltip-position="bottom"] {
top: 100%;
margin-top: 0;
}

[data-tooltip-position="left"] {
right: 100%;
margin-right: 0;
}

/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
left: 50%;
margin-left: -6px;
}

/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
top: 50%;
margin-top: -6px;
}

[data-tooltip-position="top"]:after {
bottom: 100%;
border-width: 6px 6px 0;
border-top-color: #000;
}

[data-tooltip-position="right"]:after {
left: 100%;
border-width: 6px 6px 6px 0;
border-right-color: #000;
}

[data-tooltip-position="bottom"]:after {
top: 100%;
border-width: 0 6px 6px;
border-bottom-color: #000;
}

[data-tooltip-position="left"]:after {
right: 100%;
border-width: 6px 0 6px 6px;
border-left-color: #000;
}`;
this.wordSet = new Set(wordArray);
this.insertCSSOnAllTabs();
this.addListeners();
this.portFromCS = null;
this.APPLICABLE_PROTOCOLS = ["http:", "https:", "ftp:", "file:"];
this.CSS = {
code: CSS
};
}

addListeners() {
browser.runtime.onMessage.addListener((msg, sender, sendResponse) => {
this.handleMessageFromContent(msg, sender, sendResponse)
});
browser.runtime.onConnect.addListener((port) => this.connected(port));
}

/**
* msg: one of
* getList => returns this.wordSet (list of words)
* wordUsed => remove a word from this.wordSet
*/
handleMessageFromContent(msg, sender, sendResponse) {
switch (msg.type) {
case "getList":
sendResponse(this.wordSet);
break;
case "wordUsed":
// remove word from the list
this.wordSet.delete(msg.word);
break;
default:
throw new Error(`Message type not recognized: ${msg}`);
}
connected(p) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this feels so weird and abstract. Some future world, let's get this pattern to be written better.

this.portFromCS = p;
this.portFromCS.postMessage({type: "backgroundConnected"});
this.portFromCS.onMessage.addListener((m) => {
switch (m.type) {
case "getList":
this.portFromCS.postMessage({ type: "getList", data: this.wordSet });
break;
case "wordUsed":
// remove word from the list
this.wordSet.delete(m.word);
break;
default:
throw new Error(`Message type not recognized: ${m.type}`);
}
});
}

/**
Expand All @@ -185,7 +159,7 @@ class PersistentPageModificationEffect {

// Each time a tab is updated, add CSS for that tab.
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
if (this.protocolIsApplicable(tab.url)) {
if (this.protocolIsApplicable(tab.url) && tab.status === "complete") {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

interesting, interesting! Good catch.

browser.tabs.insertCSS(id, this.CSS);
}
});
Expand Down
44 changes: 18 additions & 26 deletions addon/webextension/content-script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,22 @@

/*eslint no-cond-assign: "warn"*/

var myPort = browser.runtime.connect({name:"port-from-cs"});

// don't send a message to background until it's actually listening
myPort.onMessage.addListener(function(m) {
switch (m.type) {
case "backgroundConnected":
myPort.postMessage({ type: "getList" });
break;
case "getList":
findAndReplace(m.data);
break;
default:
throw new Error(`Message type not recognized: ${m.type}`);
}
});

function findAndReplace(wordList) {
// the ones we actually find and substitute
let seen = new Set();
Expand All @@ -16,7 +32,8 @@ function findAndReplace(wordList) {
matchCb: function matchCb (matchObj) {
const observed = matchObj[0].toLowerCase();
seen.add(observed);
sendMessage({ type: "wordUsed", word: observed });
// tell the background script that word has been used.
myPort.postMessage({ type: "wordUsed", word: observed });
}
}
);
Expand Down Expand Up @@ -102,28 +119,3 @@ function wrapWith (element, config) {
node.nodeValue = text;
}
}

// set up message passing to background.js
async function sendMessage(msg) {
switch (msg.type) {
case "getList":
// send message to background to ask for words Set
try {
return await browser.runtime.sendMessage(msg);
} catch (error) {
throw new Error(`Error getting word list: ${error}`);
}
case "wordUsed":
try {
return await browser.runtime.sendMessage(msg);
} catch (error) {
throw new Error(`Error sending word used: ${error}`);
}
default:
throw new Error(`Unknown message type, ${msg.type}`);
}
}

// get word list from background script, then do it!
sendMessage({ type: "getList" }).then(findAndReplace);
//findAndReplace()