Question 245246 in Html Question posted in
Some basic documentation can be found here.

Html – Why does importing something ruin my entire code?

I have a simple chrome extension that grabs a user’s selected text using Chrome Tabs API. I’d like to import a Hugging Face API eventually, but when I import the required model, my Chrome Tabs API no longer executes. The selected text no longer appears inside the p tag I created in HTML. I tried wrapping the import line in tabs and it still does not work. I am wondering if anyone can help to see why importing this is causing the rest of my code to not execute properly?

JAVASCRIPT

chrome.tabs.executeScript( {
  code: "window.getSelection().toString();"
}, function(selection) {
  document.getElementById("new-task").innerHTML  =  (selection[0])
});

import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
       <p type="text" id="new-task" class="new-task" contenteditable="true"></p>
</body>
</html>

JSON

{
  "manifest_version": 2,
  "name": "X",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "storage",
    "https://ajax.googleapis.com/"
  ],
  "browser_action": {
    "default_popup": "index.html"
  },
  "background": {
    "scripts": ["myscript.js"]
  }
}
Tags:

2

Answers


  1. 0

    The first thing to check is if there are any errors or issues with the imported module from Hugging Face. If there is a problem with that module, it might break the rest of your code.

    try {
  import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
  // Any code that depends on the imported module
} catch (error) {
  console.error('Error importing Hugging Face Transformers:', error);
}
    Login or Signup to reply.
  2. 0

    The problem you’re having appears to be due to the way the JavaScript code is constructed. When you use import to import external dependencies, it should not interfere with your current code. Make sure the code that utilizes the Chrome Tabs API comes after the import statement. After the needed model has been imported, the chrome.tabs.executeScript method should be invoked. Examine the model for any mistakes that may have occurred during the import process. JavaScript mistakes can prevent future code from running. Here’s a rewritten version of your code that takes these factors into account:

    import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';

// Ensure that your code executes after the DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
  // Use chrome.tabs.executeScript inside this event listener
  chrome.tabs.executeScript({
    code: "window.getSelection().toString();"
  }, function(selection) {
    // Check if there was an error
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError);
      return;
    }

    // Update the HTML with the selected text
    document.getElementById("new-task").innerHTML = (selection[0]);
  });
});

    You ensure that your code runs after the DOM has fully loaded by surrounding it within the DOMContentLoaded event listener. It also checks for any issues that may arise during the execution of chrome.tabs.executeScript.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search