Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kihoon #1

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Kihoon #1

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3494125
add hilighting files
Dec 3, 2022
c6a27dc
test
Dec 3, 2022
62139ab
add annotation feature
Dec 3, 2022
67645e6
add annotations in TabManager.jsx
Dec 3, 2022
8ee40a0
test
Dec 3, 2022
2aa7f64
delete outlib files
Dec 3, 2022
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
25 changes: 19 additions & 6 deletions background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,16 +199,23 @@ function tabUpdated(tabId, changeInfo, tabInfo){
if (url && !url.startsWith('chrome://')) {
const date = Date.now();
console.log(`Tab: ${tabId} URL changed to ${url} at ${date}`);
readPage(tabId);
// readPage(tabId);
setupAnnotation(tabId);
}
}

function setupAnnotation(tabId) {
browser.scripting.executeScript({ // this works. Don't touch.
target: { tabId: tabId },
files: ['lib/content.js']
})
}

function readPage(tabId){
browser.scripting.executeScript({ // this works. Don't touch.
target: { tabId: tab.id },
func: ['readPage.js']
target: { tabId: tabId },
files: ['lib/readPage.js']
})

}

function logRequest(details){
Expand Down Expand Up @@ -513,6 +520,14 @@ browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
let payload = request.result;
console.log(payload);
}
else if (request.from === "content") {
// sent the data (hilighted text and url) to the lib/annotation.jsx
chrome.runtime.sendMessage( {
command: 'sent_annotation',
highlighted_text: request.result,
url: request.url,
});
}
else if (request.command === "update_settings"){
let settings = request.params
if (settings.name === "openInOwnTab"){ setupPopup(settings.value); }
Expand Down Expand Up @@ -617,8 +632,6 @@ async function openExtension(){
await browser.action.openPopup();
}



// setInterval(setupListeners, 300000);
// setupListeners();
setup();
25 changes: 22 additions & 3 deletions lib/TabManager.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,8 @@ class TabManager extends React.Component {
optionsActive: !!this.props.optionsActive,
filterTabs: filterTabs,
dupTabs: false,
colorsActive: false
colorsActive: false,
annotations: []
};

this.addWindow = this.addWindow.bind(this);
Expand Down Expand Up @@ -148,6 +149,7 @@ class TabManager extends React.Component {
this.fuzzySearch = this.fuzzySearch.bind(this);
this.sessionsText = this.sessionsText.bind(this);
this.sessionSync = this.sessionSync.bind(this);
this.receiveMessage = this.receiveMessage.bind(this);
this.tabActionsText = this.tabActionsText.bind(this);
this.tabHeightText = this.tabHeightText.bind(this);
this.tabLimitText = this.tabLimitText.bind(this);
Expand Down Expand Up @@ -206,6 +208,7 @@ class TabManager extends React.Component {
//this.update();
this.forceUpdate();
}

render() {
var _this = this;

Expand Down Expand Up @@ -514,6 +517,7 @@ class TabManager extends React.Component {
</table>
</div>
<div className="window placeholder" />

</div>
);
}
Expand All @@ -535,6 +539,7 @@ class TabManager extends React.Component {
browser.windows.onRemoved.addListener(runUpdate);

browser.storage.onChanged.addListener(this.sessionSync);
browser.runtime.onMessage.addListener(this.receiveMessage)

this.sessionSync();

Expand All @@ -557,6 +562,18 @@ class TabManager extends React.Component {
// box.select();
// box.focus();
}

receiveMessage(message, sender, sendResponse) {
if(message.command === 'sent_annotation'){
console.log(message.highlighted_text);
console.log(message.url);

this.state.annotations.push({
url: message.url,
annotation: message.highlighted_text
});
}
}

async sessionSync() {
var values = await browser.storage.local.get(null);
Expand Down Expand Up @@ -806,13 +823,15 @@ class TabManager extends React.Component {
return;
}
let tabs = Object.values(this.state.tabsbyid);
console.log(tabs);
console.log("hello kihoon");
console.log(tabs[0]);
const fuse = new Fuse(
tabs,
{
keys: [
{name: 'title', weight: 0.6},
{name: 'url', weight: 0.4}
{name: 'url', weight: 0.4},
// {name: 'annotations', weight: 0.3}
],
includeScore: true ,
includesMatches: true,
Expand Down
35 changes: 35 additions & 0 deletions lib/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
const mediumHighlighter1 = document.createElement("medium-highlighter");
document.body.appendChild(mediumHighlighter1);

const setMarkerPosition = (markerPosition) =>
mediumHighlighter1.setAttribute(
"markerPosition",
JSON.stringify(markerPosition)
);

const getSelectedText = () => window.getSelection().toString();

document.addEventListener("click", () => {
if (getSelectedText().length > 0) {
setMarkerPosition(getMarkerPosition());
}
});

document.addEventListener("selectionchange", () => {
if (getSelectedText().length === 0) {
setMarkerPosition({ display: "none" });
}
});

function getMarkerPosition() {
const rangeBounds = window
.getSelection()
.getRangeAt(0)
.getBoundingClientRect();
return {
// Substract width of marker button -> 40px / 2 = 20
left: rangeBounds.left + rangeBounds.width / 2 - 35,
top: rangeBounds.top - 70,
display: "flex",
};
}
139 changes: 139 additions & 0 deletions lib/medium-highlighter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
const highlightColor = "rgb(255, 255, 0)";

const template = `
<template id="highlightTemplate">
<span class="highlight" style="background-color: ${highlightColor}; display: inline"></span>
</template>

<button id="mediumHighlighter">
<svg background-color: white; xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512.001 512.001" xml:space="preserve">
<polygon style="fill:#EEBA7D;" points="46.578,507.251 0,479.67 43.075,436.595 80.154,473.675 "/>
<g>
<polygon style="fill:#E68D2C;" points="46.578,507.251 23.288,493.461 61.615,455.135 80.154,473.675 "/>
<path style="fill:#E68D2C;" d="M54.542,462.208l31.732,31.732l24.002-24.002l93.176-22.663L499.587,151.14 c16.552-16.552,16.552-43.386,0-59.938l-37.019-37.019L425.55,17.164c-16.552-16.552-43.386-16.552-59.939,0L69.474,313.298 l-22.663,93.176L22.81,430.476L54.542,462.208z"/>
</g>
<path style="fill:#E06B34;" d="M54.542,462.208l31.732,31.732l24.002-24.002l93.176-22.663L499.587,151.14 c16.552-16.552,16.552-43.386,0-59.938l-37.019-37.019L54.542,462.208z"/>
<rect x="273.637" y="129.753" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 358.521 582.2773)" style="fill:#A8EAEF;" width="52.435" height="174.268"/>
<rect x="296.019" y="139.027" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 367.7948 604.6673)" style="fill:#80CDD8;" width="26.219" height="174.268"/>
<polygon style="fill:#E06B34;" points="69.474,313.298 46.812,406.474 22.811,430.476 54.542,462.208 86.273,493.939 110.275,469.938 203.451,447.275 69.475,313.298 "/>
<polygon style="fill:#D1393C;" points="136.462,380.287 54.542,462.208 86.273,493.939 110.275,469.938 203.451,447.275 69.475,313.298 "/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</button>
`;

const styled = ({ display = "none", left = 0, top = 0 }) => `
#mediumHighlighter {
align-items: center;
background-color: black;
border-radius: 5px;
border: none;
cursor: pointer;
display: ${display};
justify-content: center;
left: ${left}px;
padding: 5px 10px;
position: fixed;
top: ${top}px;
width: 70px;
z-index: 9999;
}
.text-marker {
fill: white;
}
.text-marker:hover {
fill: ${highlightColor};
}
`;

class MediumHighlighter extends HTMLElement {
constructor() {
super();
this.render();
}

get markerPosition() {
return JSON.parse(this.getAttribute("markerPosition") || "{}");
}

get styleElement() {
return this.shadowRoot.querySelector("style");
}

get highlightTemplate() {
return this.shadowRoot.getElementById("highlightTemplate");
}

static get observedAttributes() {
return ["markerPosition"];
}

render() {
this.attachShadow({ mode: "open" });
const style = document.createElement("style");
style.textContent = styled({});
this.shadowRoot.appendChild(style);
this.shadowRoot.innerHTML += template;
this.shadowRoot
.getElementById("mediumHighlighter")
.addEventListener("click", () => this.highlightSelection());
}

attributeChangedCallback(name, oldValue, newValue) {
if (name === "markerPosition") {
this.styleElement.textContent = styled(this.markerPosition);
}
}

highlightSelection() {
var userSelection = window.getSelection();
for (let i = 0; i < userSelection.rangeCount; i++) {
this.highlightRange(userSelection.getRangeAt(i));
}
var browser = chrome || browser;
browser.runtime.sendMessage({
from: "content",
result: userSelection.toString(),
url: document.querySelector("a").href
})
window.getSelection().empty();
}

highlightRange(range) {
const clone =
this.highlightTemplate.cloneNode(true).content.firstElementChild;
clone.appendChild(range.extractContents());
range.insertNode(clone);
}
}

window.customElements.define("medium-highlighter", MediumHighlighter);
Empty file added lib/webcomponents-bundle.js
View file
Open in desktop
Empty file.
9 changes: 7 additions & 2 deletions manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,24 @@
},
"permissions": [
"tabs",
"activeTab",
"contextMenus",
"storage",
"tabGroups",
"windows",
"webRequest"
"webRequest",
"scripting"
],
"host_permissions":[
"*://*/*"
],
"content_scripts":[
{
"matches": ["*://*/*"],
"js": ["lib/readPage.js"]
"js": [
"node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"lib/medium-highlighter.js",
"lib/content.js"]
}
],
"optional_permissions": [
Expand Down
Loading