gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-05 15:04:24 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Reset web-clipper to origin/main baseline for MV3 migration

Browse Source
This commit is contained in:
Octech2722 2025-10-11 20:33:18 -05:00
parent 0c1de7e183
commit a00ea2e91d
8 changed files with 357 additions and 542 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web-clipper/README.md
View File

@ -9,9 +9,7 @@ Trilium Web Clipper is a web browser extension which allows user to clip text, s
For more details, see the [wiki page](https://github.com/zadam/trilium/wiki/Web-clipper). For more details, see the [wiki page](https://github.com/zadam/trilium/wiki/Web-clipper).
## Keyboard shortcuts ## Keyboard shortcuts
Keyboard shortcuts are available for most functions: Keyboard shortcuts are available for most functions:
* Save selected text: `Ctrl+Shift+S` (Mac: `Cmd+Shift+S`) * Save selected text: `Ctrl+Shift+S` (Mac: `Cmd+Shift+S`)
* Save whole page: `Alt+Shift+S` (Mac: `Opt+Shift+S`) * Save whole page: `Alt+Shift+S` (Mac: `Opt+Shift+S`)
* Save screenshot: `Ctrl+Shift+E` (Mac: `Cmd+Shift+E`) * Save screenshot: `Ctrl+Shift+E` (Mac: `Cmd+Shift+E`)
@ -23,5 +21,4 @@ To set custom shortcuts, follow the directions for your browser.
**Chrome**: `chrome://extensions/shortcuts` **Chrome**: `chrome://extensions/shortcuts`
## Credits ## Credits
Some parts of the code are based on the [Joplin Notes browser extension](https://github.com/laurent22/joplin/tree/master/Clipper). Some parts of the code are based on the [Joplin Notes browser extension](https://github.com/laurent22/joplin/tree/master/Clipper).

198
apps/web-clipper/background.js
View File

@ -1,7 +1,3 @@
// Import modules
import { randomString } from './utils.js';
import { triliumServerFacade } from './trilium_server_facade.js';
// Keyboard shortcuts // Keyboard shortcuts
chrome.commands.onCommand.addListener(async function (command) { chrome.commands.onCommand.addListener(async function (command) {
if (command == "saveSelection") { if (command == "saveSelection") {
@ -12,6 +8,7 @@ chrome.commands.onCommand.addListener(async function (command) {
await saveTabs(); await saveTabs();
} else if (command == "saveCroppedScreenshot") { } else if (command == "saveCroppedScreenshot") {
const activeTab = await getActiveTab(); const activeTab = await getActiveTab();
await saveCroppedScreenshot(activeTab.url); await saveCroppedScreenshot(activeTab.url);
} else { } else {
console.log("Unrecognized command", command); console.log("Unrecognized command", command);
@ -40,7 +37,7 @@ function cropImage(newArea, dataUrl) {
async function takeCroppedScreenshot(cropRect) { async function takeCroppedScreenshot(cropRect) {
const activeTab = await getActiveTab(); const activeTab = await getActiveTab();
const zoom = await chrome.tabs.getZoom(activeTab.id) * globalThis.devicePixelRatio || 1; const zoom = await browser.tabs.getZoom(activeTab.id) * window.devicePixelRatio;
const newArea = Object.assign({}, cropRect); const newArea = Object.assign({}, cropRect);
newArea.x *= zoom; newArea.x *= zoom;
@ -48,7 +45,7 @@ async function takeCroppedScreenshot(cropRect) {
newArea.width *= zoom; newArea.width *= zoom;
newArea.height *= zoom; newArea.height *= zoom;
const dataUrl = await chrome.tabs.captureVisibleTab(null, { format: 'png' }); const dataUrl = await browser.tabs.captureVisibleTab(null, { format: 'png' });
return await cropImage(newArea, dataUrl); return await cropImage(newArea, dataUrl);
} }
@ -58,56 +55,61 @@ async function takeWholeScreenshot() {
// workaround to save the whole page is to scroll & stitch // workaround to save the whole page is to scroll & stitch
// example in https://github.com/mrcoles/full-page-screen-capture-chrome-extension // example in https://github.com/mrcoles/full-page-screen-capture-chrome-extension
// see page.js and popup.js // see page.js and popup.js
return await chrome.tabs.captureVisibleTab(null, { format: 'png' }); return await browser.tabs.captureVisibleTab(null, { format: 'png' });
} }
chrome.runtime.onInstalled.addListener(() => { browser.runtime.onInstalled.addListener(() => {
if (isDevEnv()) { if (isDevEnv()) {
chrome.action.setIcon({ browser.browserAction.setIcon({
path: 'icons/32-dev.png', path: 'icons/32-dev.png',
}); });
} }
}); });
// Context menus browser.contextMenus.create({
chrome.contextMenus.create({
id: "trilium-save-selection", id: "trilium-save-selection",
title: "Save selection to Trilium", title: "Save selection to Trilium",
contexts: ["selection"] contexts: ["selection"]
}); });
chrome.contextMenus.create({ browser.contextMenus.create({
id: "trilium-save-cropped-screenshot", id: "trilium-save-cropped-screenshot",
title: "Clip screenshot to Trilium", title: "Clip screenshot to Trilium",
contexts: ["page"] contexts: ["page"]
}); });
chrome.contextMenus.create({ browser.contextMenus.create({
id: "trilium-save-cropped-screenshot",
title: "Crop screen shot to Trilium",
contexts: ["page"]
});
browser.contextMenus.create({
id: "trilium-save-whole-screenshot", id: "trilium-save-whole-screenshot",
title: "Save whole screen shot to Trilium", title: "Save whole screen shot to Trilium",
contexts: ["page"] contexts: ["page"]
}); });
chrome.contextMenus.create({ browser.contextMenus.create({
id: "trilium-save-page", id: "trilium-save-page",
title: "Save whole page to Trilium", title: "Save whole page to Trilium",
contexts: ["page"] contexts: ["page"]
}); });
chrome.contextMenus.create({ browser.contextMenus.create({
id: "trilium-save-link", id: "trilium-save-link",
title: "Save link to Trilium", title: "Save link to Trilium",
contexts: ["link"] contexts: ["link"]
}); });
chrome.contextMenus.create({ browser.contextMenus.create({
id: "trilium-save-image", id: "trilium-save-image",
title: "Save image to Trilium", title: "Save image to Trilium",
contexts: ["image"] contexts: ["image"]
}); });
async function getActiveTab() { async function getActiveTab() {
const tabs = await chrome.tabs.query({ const tabs = await browser.tabs.query({
active: true, active: true,
currentWindow: true currentWindow: true
}); });
@ -116,7 +118,7 @@ async function getActiveTab() {
} }
async function getWindowTabs() { async function getWindowTabs() {
const tabs = await chrome.tabs.query({ const tabs = await browser.tabs.query({
currentWindow: true currentWindow: true
}); });
@ -130,80 +132,21 @@ async function sendMessageToActiveTab(message) {
throw new Error("No active tab."); throw new Error("No active tab.");
} }
// In Manifest V3, we need to inject content script if not already present
try { try {
return await chrome.tabs.sendMessage(activeTab.id, message); return await browser.tabs.sendMessage(activeTab.id, message);
} catch (error) {
// Content script might not be injected, try to inject it
try {
await chrome.scripting.executeScript({
target: { tabId: activeTab.id },
files: ['content.js']
});
// Wait a bit for the script to initialize
await new Promise(resolve => setTimeout(resolve, 200));
return await chrome.tabs.sendMessage(activeTab.id, message);
} catch (injectionError) {
console.error('Failed to inject content script:', injectionError);
throw new Error(`Failed to communicate with page: ${injectionError.message}`);
} }
catch (e) {
throw e;
} }
} }
async function toast(message, noteId = null, tabIds = null) { function toast(message, noteId = null, tabIds = null) {
try { sendMessageToActiveTab({
await sendMessageToActiveTab({
name: 'toast', name: 'toast',
message: message, message: message,
noteId: noteId, noteId: noteId,
tabIds: tabIds tabIds: tabIds
}); });
} catch (error) {
console.error('Failed to show toast:', error);
}
}
function showStatusToast(message, isProgress = true) {
// Make this completely async and fire-and-forget
// Only try to send status if we're confident the content script will be ready
(async () => {
try {
// Test if content script is ready with a quick ping
const activeTab = await getActiveTab();
if (!activeTab) return;
await chrome.tabs.sendMessage(activeTab.id, { name: 'ping' });
// If ping succeeds, send the status toast
await chrome.tabs.sendMessage(activeTab.id, {
name: 'status-toast',
message: message,
isProgress: isProgress
});
} catch (error) {
// Content script not ready or failed - silently skip
}
})();
}
function updateStatusToast(message, isProgress = true) {
// Make this completely async and fire-and-forget
(async () => {
try {
const activeTab = await getActiveTab();
if (!activeTab) return;
// Direct message without injection logic since content script should be ready by now
await chrome.tabs.sendMessage(activeTab.id, {
name: 'update-status-toast',
message: message,
isProgress: isProgress
});
} catch (error) {
// Content script not ready or failed - silently skip
}
})();
} }
function blob2base64(blob) { function blob2base64(blob) {
@ -239,7 +182,7 @@ async function postProcessImage(image) {
} }
async function postProcessImages(resp) { async function postProcessImages(resp) {
if (resp && resp.images) { if (resp.images) {
for (const image of resp.images) { for (const image of resp.images) {
await postProcessImage(image); await postProcessImage(image);
} }
@ -247,32 +190,17 @@ async function postProcessImages(resp) {
} }
async function saveSelection() { async function saveSelection() {
showStatusToast("📝 Capturing selection...");
const payload = await sendMessageToActiveTab({name: 'trilium-save-selection'}); const payload = await sendMessageToActiveTab({name: 'trilium-save-selection'});
if (!payload) {
console.error('No payload received from content script');
updateStatusToast("❌ Failed to capture selection", false);
return;
}
if (payload.images && payload.images.length > 0) {
updateStatusToast(`🖼️ Processing ${payload.images.length} image(s)...`);
}
await postProcessImages(payload); await postProcessImages(payload);
const triliumType = triliumServerFacade.triliumSearch?.status === 'found-desktop' ? 'Desktop' : 'Server';
updateStatusToast(`💾 Saving to Trilium ${triliumType}...`);
const resp = await triliumServerFacade.callService('POST', 'clippings', payload); const resp = await triliumServerFacade.callService('POST', 'clippings', payload);
if (!resp) { if (!resp) {
updateStatusToast("❌ Failed to save to Trilium", false);
return; return;
} }
await toast("✅ Selection has been saved to Trilium.", resp.noteId); toast("Selection has been saved to Trilium.", resp.noteId);
} }
async function getImagePayloadFromSrc(src, pageUrl) { async function getImagePayloadFromSrc(src, pageUrl) {
@ -294,46 +222,33 @@ async function getImagePayloadFromSrc(src, pageUrl) {
} }
async function saveCroppedScreenshot(pageUrl) { async function saveCroppedScreenshot(pageUrl) {
showStatusToast("📷 Preparing screenshot...");
const cropRect = await sendMessageToActiveTab({name: 'trilium-get-rectangle-for-screenshot'}); const cropRect = await sendMessageToActiveTab({name: 'trilium-get-rectangle-for-screenshot'});
updateStatusToast("📸 Capturing screenshot...");
const src = await takeCroppedScreenshot(cropRect); const src = await takeCroppedScreenshot(cropRect);
const payload = await getImagePayloadFromSrc(src, pageUrl); const payload = await getImagePayloadFromSrc(src, pageUrl);
const triliumType = triliumServerFacade.triliumSearch?.status === 'found-desktop' ? 'Desktop' : 'Server';
updateStatusToast(`💾 Saving to Trilium ${triliumType}...`);
const resp = await triliumServerFacade.callService("POST", "clippings", payload); const resp = await triliumServerFacade.callService("POST", "clippings", payload);
if (!resp) { if (!resp) {
updateStatusToast("❌ Failed to save screenshot", false);
return; return;
} }
await toast("✅ Screenshot has been saved to Trilium.", resp.noteId); toast("Screenshot has been saved to Trilium.", resp.noteId);
} }
async function saveWholeScreenshot(pageUrl) { async function saveWholeScreenshot(pageUrl) {
showStatusToast("📸 Capturing full screenshot...");
const src = await takeWholeScreenshot(); const src = await takeWholeScreenshot();
const payload = await getImagePayloadFromSrc(src, pageUrl); const payload = await getImagePayloadFromSrc(src, pageUrl);
const triliumType = triliumServerFacade.triliumSearch?.status === 'found-desktop' ? 'Desktop' : 'Server';
updateStatusToast(`💾 Saving to Trilium ${triliumType}...`);
const resp = await triliumServerFacade.callService("POST", "clippings", payload); const resp = await triliumServerFacade.callService("POST", "clippings", payload);
if (!resp) { if (!resp) {
updateStatusToast("❌ Failed to save screenshot", false);
return; return;
} }
await toast("✅ Screenshot has been saved to Trilium.", resp.noteId); toast("Screenshot has been saved to Trilium.", resp.noteId);
} }
async function saveImage(srcUrl, pageUrl) { async function saveImage(srcUrl, pageUrl) {
@ -345,40 +260,21 @@ async function saveImage(srcUrl, pageUrl) {
return; return;
} }
await toast("Image has been saved to Trilium.", resp.noteId); toast("Image has been saved to Trilium.", resp.noteId);
} }
async function saveWholePage() { async function saveWholePage() {
// Step 1: Show initial status (completely non-blocking)
showStatusToast("📄 Page capture started...");
const payload = await sendMessageToActiveTab({name: 'trilium-save-page'}); const payload = await sendMessageToActiveTab({name: 'trilium-save-page'});
if (!payload) {
console.error('No payload received from content script');
updateStatusToast("❌ Failed to capture page content", false);
return;
}
// Step 2: Processing images
if (payload.images && payload.images.length > 0) {
updateStatusToast(`🖼️ Processing ${payload.images.length} image(s)...`);
}
await postProcessImages(payload); await postProcessImages(payload);
// Step 3: Saving to Trilium
const triliumType = triliumServerFacade.triliumSearch?.status === 'found-desktop' ? 'Desktop' : 'Server';
updateStatusToast(`💾 Saving to Trilium ${triliumType}...`);
const resp = await triliumServerFacade.callService('POST', 'notes', payload); const resp = await triliumServerFacade.callService('POST', 'notes', payload);
if (!resp) { if (!resp) {
updateStatusToast("❌ Failed to save to Trilium", false);
return; return;
} }
// Step 4: Success with link toast("Page has been saved to Trilium.", resp.noteId);
await toast("✅ Page has been saved to Trilium.", resp.noteId);
} }
async function saveLinkWithNote(title, content) { async function saveLinkWithNote(title, content) {
@ -399,7 +295,7 @@ async function saveLinkWithNote(title, content) {
return false; return false;
} }
await toast("Link with note has been saved to Trilium.", resp.noteId); toast("Link with note has been saved to Trilium.", resp.noteId);
return true; return true;
} }
@ -445,16 +341,10 @@ async function saveTabs() {
const tabIds = tabs.map(tab=>{return tab.id}); const tabIds = tabs.map(tab=>{return tab.id});
await toast(`${tabs.length} links have been saved to Trilium.`, resp.noteId, tabIds); toast(`${tabs.length} links have been saved to Trilium.`, resp.noteId, tabIds);
} }
// Helper function browser.contextMenus.onClicked.addListener(async function(info, tab) {
function isDevEnv() {
const manifest = chrome.runtime.getManifest();
return manifest.name.endsWith('(dev)');
}
chrome.contextMenus.onClicked.addListener(async function(info, tab) {
if (info.menuItemId === 'trilium-save-selection') { if (info.menuItemId === 'trilium-save-selection') {
await saveSelection(); await saveSelection();
} }
@ -485,7 +375,7 @@ chrome.contextMenus.onClicked.addListener(async function(info, tab) {
return; return;
} }
await toast("Link has been saved to Trilium.", resp.noteId); toast("Link has been saved to Trilium.", resp.noteId);
} }
else if (info.menuItemId === 'trilium-save-page') { else if (info.menuItemId === 'trilium-save-page') {
await saveWholePage(); await saveWholePage();
@ -495,7 +385,7 @@ chrome.contextMenus.onClicked.addListener(async function(info, tab) {
} }
}); });
chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => { browser.runtime.onMessage.addListener(async request => {
console.log("Received", request); console.log("Received", request);
if (request.name === 'openNoteInTrilium') { if (request.name === 'openNoteInTrilium') {
@ -507,14 +397,14 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
// desktop app is not available so we need to open in browser // desktop app is not available so we need to open in browser
if (resp.result === 'open-in-browser') { if (resp.result === 'open-in-browser') {
const {triliumServerUrl} = await chrome.storage.sync.get("triliumServerUrl"); const {triliumServerUrl} = await browser.storage.sync.get("triliumServerUrl");
if (triliumServerUrl) { if (triliumServerUrl) {
const noteUrl = triliumServerUrl + '/#' + request.noteId; const noteUrl = triliumServerUrl + '/#' + request.noteId;
console.log("Opening new tab in browser", noteUrl); console.log("Opening new tab in browser", noteUrl);
chrome.tabs.create({ browser.tabs.create({
url: noteUrl url: noteUrl
}); });
} }
@ -524,20 +414,19 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
} }
} }
else if (request.name === 'closeTabs') { else if (request.name === 'closeTabs') {
return await chrome.tabs.remove(request.tabIds) return await browser.tabs.remove(request.tabIds)
} }
else if (request.name === 'load-script') { else if (request.name === 'load-script') {
return await chrome.scripting.executeScript({ return await browser.tabs.executeScript({file: request.file});
target: { tabId: sender.tab?.id },
files: [request.file]
});
} }
else if (request.name === 'save-cropped-screenshot') { else if (request.name === 'save-cropped-screenshot') {
const activeTab = await getActiveTab(); const activeTab = await getActiveTab();
return await saveCroppedScreenshot(activeTab.url); return await saveCroppedScreenshot(activeTab.url);
} }
else if (request.name === 'save-whole-screenshot') { else if (request.name === 'save-whole-screenshot') {
const activeTab = await getActiveTab(); const activeTab = await getActiveTab();
return await saveWholeScreenshot(activeTab.url); return await saveWholeScreenshot(activeTab.url);
} }
else if (request.name === 'save-whole-page') { else if (request.name === 'save-whole-page') {
@ -559,7 +448,4 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
const activeTab = await getActiveTab(); const activeTab = await getActiveTab();
triliumServerFacade.triggerSearchNoteByUrl(activeTab.url); triliumServerFacade.triggerSearchNoteByUrl(activeTab.url);
} }
// Important: return true to indicate async response
return true;
}); });

80
apps/web-clipper/content.js
View File

@ -1,33 +1,3 @@
// Utility functions (inline to avoid module dependency issues)
function randomString(len) {
let text = "";
const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (let i = 0; i < len; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
function getBaseUrl() {
let output = getPageLocationOrigin() + location.pathname;
if (output[output.length - 1] !== '/') {
output = output.split('/');
output.pop();
output = output.join('/');
}
return output;
}
function getPageLocationOrigin() {
// location.origin normally returns the protocol + domain + port (eg. https://example.com:8080)
// but for file:// protocol this is browser dependant and in particular Firefox returns "null" in this case.
return location.protocol === 'file:' ? 'file://' : location.origin;
}
function absoluteUrl(url) { function absoluteUrl(url) {
if (!url) { if (!url) {
return url; return url;
@ -265,7 +235,7 @@ function createLink(clickAction, text, color = "lightskyblue") {
link.style.color = color; link.style.color = color;
link.appendChild(document.createTextNode(text)); link.appendChild(document.createTextNode(text));
link.addEventListener("click", () => { link.addEventListener("click", () => {
chrome.runtime.sendMessage(null, clickAction) browser.runtime.sendMessage(null, clickAction)
}); });
return link return link
@ -274,10 +244,7 @@ function createLink(clickAction, text, color = "lightskyblue") {
async function prepareMessageResponse(message) { async function prepareMessageResponse(message) {
console.info('Message: ' + message.name); console.info('Message: ' + message.name);
if (message.name === "ping") { if (message.name === "toast") {
return { success: true };
}
else if (message.name === "toast") {
let messageText; let messageText;
if (message.noteId) { if (message.noteId) {
@ -310,42 +277,6 @@ async function prepareMessageResponse(message) {
duration: 7000 duration: 7000
} }
}); });
return { success: true }; // Return a response
}
else if (message.name === "status-toast") {
await requireLib('/lib/toast.js');
// Hide any existing status toast
if (window.triliumStatusToast && window.triliumStatusToast.hide) {
window.triliumStatusToast.hide();
}
// Store reference to the status toast so we can replace it
window.triliumStatusToast = showToast(message.message, {
settings: {
duration: message.isProgress ? 60000 : 5000 // Long duration for progress, shorter for errors
}
});
return { success: true }; // Return a response
}
else if (message.name === "update-status-toast") {
await requireLib('/lib/toast.js');
// Hide the previous status toast
if (window.triliumStatusToast && window.triliumStatusToast.hide) {
window.triliumStatusToast.hide();
}
// Show new toast with updated message
window.triliumStatusToast = showToast(message.message, {
settings: {
duration: message.isProgress ? 60000 : 5000
}
});
return { success: true }; // Return a response
} }
else if (message.name === "trilium-save-selection") { else if (message.name === "trilium-save-selection") {
const container = document.createElement('div'); const container = document.createElement('div');
@ -407,10 +338,7 @@ async function prepareMessageResponse(message) {
} }
} }
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { browser.runtime.onMessage.addListener(prepareMessageResponse);
prepareMessageResponse(message).then(sendResponse);
return true; // Important: indicates async response
});
const loadedLibs = []; const loadedLibs = [];
@ -418,6 +346,6 @@ async function requireLib(libPath) {
if (!loadedLibs.includes(libPath)) { if (!loadedLibs.includes(libPath)) {
loadedLibs.push(libPath); loadedLibs.push(libPath);
await chrome.runtime.sendMessage({name: 'load-script', file: libPath}); await browser.runtime.sendMessage({name: 'load-script', file: libPath});
} }
} }

43
apps/web-clipper/manifest.json
View File

@ -1,12 +1,10 @@
{ {
"manifest_version": 3, "manifest_version": 2,
"name": "Trilium Web Clipper (dev)", "name": "Trilium Web Clipper (dev)",
"version": "1.0.1", "version": "1.0.1",
"description": "Save web clippings to Trilium Notes.", "description": "Save web clippings to Trilium Notes.",
"homepage_url": "https://github.com/zadam/trilium-web-clipper", "homepage_url": "https://github.com/zadam/trilium-web-clipper",
"content_security_policy": { "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"extension_pages": "script-src 'self'; object-src 'self'"
},
"icons": { "icons": {
"32": "icons/32.png", "32": "icons/32.png",
"48": "icons/48.png", "48": "icons/48.png",
@ -15,30 +13,37 @@
"permissions": [ "permissions": [
"activeTab", "activeTab",
"tabs", "tabs",
"storage",
"contextMenus",
"scripting"
],
"host_permissions": [
"http://*/", "http://*/",
"https://*/" "https://*/",
"<all_urls>",
"storage",
"contextMenus"
], ],
"action": { "browser_action": {
"default_icon": "icons/32.png", "default_icon": "icons/32.png",
"default_title": "Trilium Web Clipper", "default_title": "Trilium Web Clipper",
"default_popup": "popup/popup.html" "default_popup": "popup/popup.html"
}, },
"content_scripts": [], "content_scripts": [
"background": {
"service_worker": "background.js",
"type": "module"
},
"web_accessible_resources": [
{ {
"resources": ["lib/*", "utils.js", "trilium_server_facade.js", "content.js"], "matches": [
"matches": ["<all_urls>"] "<all_urls>"
],
"js": [
"lib/browser-polyfill.js",
"utils.js",
"content.js"
]
} }
], ],
"background": {
"scripts": [
"lib/browser-polyfill.js",
"utils.js",
"trilium_server_facade.js",
"background.js"
]
},
"options_ui": { "options_ui": {
"page": "options/options.html" "page": "options/options.html"
}, },

12
apps/web-clipper/options/options.js
View File

@ -56,7 +56,7 @@ async function saveTriliumServerSetup(e) {
$triliumServerPassword.val(''); $triliumServerPassword.val('');
chrome.storage.sync.set({ browser.storage.sync.set({
triliumServerUrl: $triliumServerUrl.val(), triliumServerUrl: $triliumServerUrl.val(),
authToken: json.token authToken: json.token
}); });
@ -73,7 +73,7 @@ const $resetTriliumServerSetupLink = $("#reset-trilium-server-setup");
$resetTriliumServerSetupLink.on("click", e => { $resetTriliumServerSetupLink.on("click", e => {
e.preventDefault(); e.preventDefault();
chrome.storage.sync.set({ browser.storage.sync.set({
triliumServerUrl: '', triliumServerUrl: '',
authToken: '' authToken: ''
}); });
@ -97,7 +97,7 @@ $triilumDesktopSetupForm.on("submit", e => {
return; return;
} }
chrome.storage.sync.set({ browser.storage.sync.set({
triliumDesktopPort: port triliumDesktopPort: port
}); });
@ -105,8 +105,8 @@ $triilumDesktopSetupForm.on("submit", e => {
}); });
async function restoreOptions() { async function restoreOptions() {
const {triliumServerUrl} = await chrome.storage.sync.get("triliumServerUrl"); const {triliumServerUrl} = await browser.storage.sync.get("triliumServerUrl");
const {authToken} = await chrome.storage.sync.get("authToken"); const {authToken} = await browser.storage.sync.get("authToken");
$errorMessage.hide(); $errorMessage.hide();
$successMessage.hide(); $successMessage.hide();
@ -127,7 +127,7 @@ async function restoreOptions() {
$triliumServerConfiguredDiv.hide(); $triliumServerConfiguredDiv.hide();
} }
const {triliumDesktopPort} = await chrome.storage.sync.get("triliumDesktopPort"); const {triliumDesktopPort} = await browser.storage.sync.get("triliumDesktopPort");
$triliumDesktopPort.val(triliumDesktopPort); $triliumDesktopPort.val(triliumDesktopPort);
} }

12
apps/web-clipper/popup/popup.js
View File

@ -1,6 +1,6 @@
async function sendMessage(message) { async function sendMessage(message) {
try { try {
return await chrome.runtime.sendMessage(message); return await browser.runtime.sendMessage(message);
} }
catch (e) { catch (e) {
console.log("Calling browser runtime failed:", e); console.log("Calling browser runtime failed:", e);
@ -15,7 +15,7 @@ const $saveWholeScreenShotButton = $("#save-whole-screenshot-button");
const $saveWholePageButton = $("#save-whole-page-button"); const $saveWholePageButton = $("#save-whole-page-button");
const $saveTabsButton = $("#save-tabs-button"); const $saveTabsButton = $("#save-tabs-button");
$showOptionsButton.on("click", () => chrome.runtime.openOptionsPage()); $showOptionsButton.on("click", () => browser.runtime.openOptionsPage());
$saveCroppedScreenShotButton.on("click", () => { $saveCroppedScreenShotButton.on("click", () => {
sendMessage({name: 'save-cropped-screenshot'}); sendMessage({name: 'save-cropped-screenshot'});
@ -115,7 +115,7 @@ const $connectionStatus = $("#connection-status");
const $needsConnection = $(".needs-connection"); const $needsConnection = $(".needs-connection");
const $alreadyVisited = $("#already-visited"); const $alreadyVisited = $("#already-visited");
chrome.runtime.onMessage.addListener(request => { browser.runtime.onMessage.addListener(request => {
if (request.name === 'trilium-search-status') { if (request.name === 'trilium-search-status') {
const {triliumSearch} = request; const {triliumSearch} = request;
@ -146,7 +146,7 @@ chrome.runtime.onMessage.addListener(request => {
if (isConnected) { if (isConnected) {
$needsConnection.removeAttr("disabled"); $needsConnection.removeAttr("disabled");
$needsConnection.removeAttr("title"); $needsConnection.removeAttr("title");
chrome.runtime.sendMessage({name: "trigger-trilium-search-note-url"}); browser.runtime.sendMessage({name: "trigger-trilium-search-note-url"});
} }
else { else {
$needsConnection.attr("disabled", "disabled"); $needsConnection.attr("disabled", "disabled");
@ -172,9 +172,9 @@ chrome.runtime.onMessage.addListener(request => {
const $checkConnectionButton = $("#check-connection-button"); const $checkConnectionButton = $("#check-connection-button");
$checkConnectionButton.on("click", () => { $checkConnectionButton.on("click", () => {
chrome.runtime.sendMessage({ browser.runtime.sendMessage({
name: "trigger-trilium-search" name: "trigger-trilium-search"
}) })
}); });
$(() => chrome.runtime.sendMessage({name: "send-trilium-search-status"})); $(() => browser.runtime.sendMessage({name: "send-trilium-search-status"}));

15
apps/web-clipper/trilium_server_facade.js
View File

@ -1,7 +1,7 @@
const PROTOCOL_VERSION_MAJOR = 1; const PROTOCOL_VERSION_MAJOR = 1;
function isDevEnv() { function isDevEnv() {
const manifest = chrome.runtime.getManifest(); const manifest = browser.runtime.getManifest();
return manifest.name.endsWith('(dev)'); return manifest.name.endsWith('(dev)');
} }
@ -16,7 +16,7 @@ class TriliumServerFacade {
async sendTriliumSearchStatusToPopup() { async sendTriliumSearchStatusToPopup() {
try { try {
await chrome.runtime.sendMessage({ await browser.runtime.sendMessage({
name: "trilium-search-status", name: "trilium-search-status",
triliumSearch: this.triliumSearch triliumSearch: this.triliumSearch
}); });
@ -25,7 +25,7 @@ class TriliumServerFacade {
} }
async sendTriliumSearchNoteToPopup(){ async sendTriliumSearchNoteToPopup(){
try{ try{
await chrome.runtime.sendMessage({ await browser.runtime.sendMessage({
name: "trilium-previously-visited", name: "trilium-previously-visited",
searchNote: this.triliumSearchNote searchNote: this.triliumSearchNote
}) })
@ -95,8 +95,8 @@ class TriliumServerFacade {
// continue // continue
} }
const {triliumServerUrl} = await chrome.storage.sync.get("triliumServerUrl"); const {triliumServerUrl} = await browser.storage.sync.get("triliumServerUrl");
const {authToken} = await chrome.storage.sync.get("authToken"); const {authToken} = await browser.storage.sync.get("authToken");
if (triliumServerUrl && authToken) { if (triliumServerUrl && authToken) {
try { try {
@ -162,7 +162,7 @@ class TriliumServerFacade {
} }
async getPort() { async getPort() {
const {triliumDesktopPort} = await chrome.storage.sync.get("triliumDesktopPort"); const {triliumDesktopPort} = await browser.storage.sync.get("triliumDesktopPort");
if (triliumDesktopPort) { if (triliumDesktopPort) {
return parseInt(triliumDesktopPort); return parseInt(triliumDesktopPort);
@ -222,5 +222,4 @@ class TriliumServerFacade {
} }
} }
export const triliumServerFacade = new TriliumServerFacade(); window.triliumServerFacade = new TriliumServerFacade();
export { TriliumServerFacade };

6
apps/web-clipper/utils.js
View File

@ -1,4 +1,4 @@
export function randomString(len) { function randomString(len) {
let text = ""; let text = "";
const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
@ -9,7 +9,7 @@ export function randomString(len) {
return text; return text;
} }
export function getBaseUrl() { function getBaseUrl() {
let output = getPageLocationOrigin() + location.pathname; let output = getPageLocationOrigin() + location.pathname;
if (output[output.length - 1] !== '/') { if (output[output.length - 1] !== '/') {
@ -21,7 +21,7 @@ export function getBaseUrl() {
return output; return output;
} }
export function getPageLocationOrigin() { function getPageLocationOrigin() {
// location.origin normally returns the protocol + domain + port (eg. https://example.com:8080) // location.origin normally returns the protocol + domain + port (eg. https://example.com:8080)
// but for file:// protocol this is browser dependant and in particular Firefox returns "null" in this case. // but for file:// protocol this is browser dependant and in particular Firefox returns "null" in this case.
return location.protocol === 'file:' ? 'file://' : location.origin; return location.protocol === 'file:' ? 'file://' : location.origin;