WebSim Code Viewer & Editor Plugin - Cross-Site Solution

Creating a Browser Extension with Live Editing

To make the Code Viewer work across different websites and allow live editing, we'll update our browser extension. Here's how you can do it:

1. Update the manifest file

Update the manifest.json file to include necessary permissions:

{
  "manifest_version": 2,
  "name": "WebSim Code Viewer & Editor",
  "version": "1.1",
  "description": "View and edit source code of WebSim-generated websites",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "browser_action": {
    "default_title": "View/Edit WebSim Code"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js"],
      "css": ["styles.css"]
    }
  ]
}

2. Update the background script

The background.js file remains the same:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendMessage(tab.id, {action: "toggleCodeViewer"});
});

3. Update the content script

Update the content.js file to include live editing functionality:

let codeViewer, toggleButton, editor;

function createCodeViewer() {
  codeViewer = document.createElement('div');
  codeViewer.id = 'websim-codeviewer';
  codeViewer.style.display = 'none';

  editor = document.createElement('textarea');
  editor.id = 'websim-editor';

  let applyButton = document.createElement('button');
  applyButton.id = 'websim-applyButton';
  applyButton.textContent = 'Apply Changes';
  applyButton.addEventListener('click', applyChanges);

  codeViewer.appendChild(editor);
  codeViewer.appendChild(applyButton);
  document.body.appendChild(codeViewer);

  toggleButton = document.createElement('button');
  toggleButton.id = 'websim-toggleButton';
  toggleButton.textContent = 'Toggle Code Viewer';
  document.body.appendChild(toggleButton);

  toggleButton.addEventListener('click', toggleCodeViewer);
}

function toggleCodeViewer() {
  if (codeViewer.style.display === 'none') {
    codeViewer.style.display = 'block';
    fetchAndDisplayCode();
  } else {
    codeViewer.style.display = 'none';
  }
}

function fetchAndDisplayCode() {
  editor.value = document.documentElement.outerHTML;
}

function applyChanges() {
  let newHTML = editor.value;
  document.open();
  document.write(newHTML);
  document.close();
}

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "toggleCodeViewer") {
    if (!codeViewer) {
      createCodeViewer();
    }
    toggleCodeViewer();
  }
});

4. Update the styles

Update the styles.css file to style the new elements:

#websim-codeviewer {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: #1e1e1e;
  color: #d4d4d4;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

#websim-toggleButton {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10000;
  padding: 10px;
  background: #007acc;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#websim-editor {
  flex-grow: 1;
  padding: 20px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  background: #1e1e1e;
  color: #d4d4d4;
  border: none;
  resize: none;
}

#websim-applyButton {
  padding: 10px;
  background: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

Installing and Using the Updated Extension

The installation process remains the same. To use the updated extension:

1. Click on the extension icon in the toolbar.
2. A "Toggle Code Viewer" button will appear in the top-right corner of the page.
3. Click this button to show/hide the source code editor.
4. Edit the code in the textarea as needed.
5. Click the "Apply Changes" button to update the page with your edits.

This updated browser extension not only allows viewing the source code but also provides live editing functionality for any website, including WebSim-generated ones. Remember that the changes made are client-side only and won't affect the actual website on the server.