I’m trying to make a plugin for VS code to help me teach a beginners python class. I’m trying to get it to highlight part of the VS code UI, so that I can say something along the lines of “Click here to commit the changes you made in this file”.
So far, I’m able to highlight the <h1 id="inside_iframe">I'm in UR base</h1> element, but the rest of the elements are outside the iframe that the extension is living in.
I assume I’m taking entirely the wrong approach to this problem. Is there a more productive avenue to try?
const vscode = require('vscode');
/**
* @param {vscode.ExtensionContext} context
*/
function activate(context) {
console.log('Congratulations, your extension "ariadne" is now active!');
const disposable = vscode.commands.registerCommand('ariadne.changeCss', async function () {
const selectors = [
'.monaco-editor',
'.activitybar',
"#workbench.parts.titlebar",
"#workbench.parts.activitybar > div > div.composite-bar > div > ul > li:nth-child(2)", // the search icon in the actions container
"#inside_iframe"
]; // Example selectors
const panel = vscode.window.createWebviewPanel(
'cssChanger',
'CSS Changer',
vscode.ViewColumn.One,
{
enableScripts: true
}
);
panel.webview.html = getWebviewContent(selectors);
});
context.subscriptions.push(disposable);
}
function getWebviewContent(selectors) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Changer</title>
<script>
const selectors = ${JSON.stringify(selectors)};
let index = 0;
function applyCss() {
if (index < selectors.length) {
const elements = document.querySelectorAll(selectors[index]);
console.log(index, selectors[index], "🤞", elements);
elements.forEach(el => el.style.outline = '2px solid red');
setTimeout(() => {
elements.forEach(el => el.style.outline = '');
index++;
applyCss();
}, 2000);
}
}
window.onload = applyCss;
</script>
</head>
<body>
<h1 id="inside_iframe">I'm in UR base</h1>
</body>
</html>
`;
}
// This method is called when your extension is deactivated
function deactivate() {}
module.exports = {
activate,
deactivate
}