Close preview

[clecap]

For some scenarios we would actually like to close the preview in the editor.

For example: When we are searching something in a wikitext scenario. Because in this situation we actually do not want to have the browser search feature search also in the preview pane.

According to chatgpt this is possible by a browser extension.

[clecap]

manifest

{
"manifest_version": 3,
"name": "Custom Find In Page",
"description": "Custom find functionality excluding #miyid.",
"version": "1.0",
"permissions": ["activeTab", "storage"],
"commands": {
"trigger-search": {
"suggested_key": {
"default": "Ctrl+Shift+F"
},
"description": "Trigger custom search"
}
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}

background.js

chrome.commands.onCommand.addListener(function (command) {
if (command === "trigger-search") {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
function: triggerSearchUI,
});
});
}
});

function triggerSearchUI() {
// You could trigger a UI popup here for custom search input.
alert("Search triggered!"); // You can replace this with your own logic.
}

content.s

// Utility function to search and highlight terms, excluding elements with id 'miyid'
function customFind(query) {
if (!query) return;

const regex = new RegExp(query, "gi");
const body = document.body;

// Get all text nodes
const textNodes = getTextNodesIn(body);

// Loop through each text node and highlight matches
textNodes.forEach((node) => {
const matches = [...node.textContent.matchAll(regex)];

if (matches.length) {
  const span = document.createElement('span');
  span.className = 'highlight';
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = node.textContent.replace(regex, `<span class="highlight">$&</span>`);
  node.replaceWith(...tempDiv.childNodes);
}

});
}

// Get all text nodes, excluding those inside #miyid
function getTextNodesIn(element) {
const walker = document.createTreeWalker(
element,
NodeFilter.SHOW_TEXT,
{
acceptNode: function(node) {
// Exclude text inside #miyid
if (node.parentNode && node.parentNode.id === 'miyid') {
return NodeFilter.FILTER_REJECT;
}
return NodeFilter.FILTER_ACCEPT;
}
},
false
);

const nodes = [];
let currentNode;
while (currentNode = walker.nextNode()) {
nodes.push(currentNode);
}

return nodes;
}

// Listen for the search event triggered by UI (search bar, for example)
document.addEventListener('search', (event) => {
customFind(event.detail.query);
});

POPUP

<title>Custom Find</title> <style> body { width: 300px; padding: 10px; } input { width: 100%; } .highlight { background-color: yellow; font-weight: bold; } </style>

Custom Find

Search

<script src="popup.js"></script>

popup.js

document.getElementById('searchButton').addEventListener('click', function() {
const query = document.getElementById('searchInput').value.trim();

if (query) {
// Dispatch a custom search event
const searchEvent = new CustomEvent('search', { detail: { query } });
document.dispatchEvent(searchEvent);
}
});

highlighting css

.highlight {
background-color: yellow;
font-weight: bold;
}