Chrome词典扩展开发：使用p5.js加载API遇语法困惑及CSP错误求助

Hey there! Let's break down the problems you're facing with your Chrome extension, starting with the immediate Content Security Policy error, then moving on to refining your p5.js logic.

1. Resolving the Content Security Policy (CSP) Error #

The error you're seeing happens because Chrome extensions enforce a strict default CSP that blocks external scripts from CDNs like cdnjs. Here are two ways to fix this:

Option 1: Use Local Script Files (Recommended for Chrome Web Store) #

• Download the p5.js and p5.sound.min.js files directly to your extension's directory (e.g., create a libs folder and save them there).
• Update your HTML to reference these local files instead of the CDN links:

  <script src="libs/p5.js"></script>
  <script src="libs/p5.sound.min.js"></script>
  

Option 2: Relax CSP for Local Testing (Not Recommended for Public Extensions) #

If you're just testing locally and want to keep using CDNs, add a content_security_policy field to your extension's manifest.json file (you must have a manifest for Chrome extensions):

{
  "manifest_version": 3,
  "name": "Your Dictionary Extension",
  "version": "1.0",
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://cdnjs.cloudflare.com; object-src 'self'"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

Note: Relaxing CSP introduces security risks, and this setup may be rejected by the Chrome Web Store if you plan to publish your extension.

2. Fixing p5.js Logic Issues #

Your current code has a few gaps in how p5.js works and how you handle the API data:

Key Problems to Address: #

• p5.js requires a setup() function to initialize its environment—without it, functions like loadJSON won't behave as expected.
• The draw() function runs continuously (60x/second), which is unnecessary here—you only need to fetch data when the button is clicked.
• The dictionary API returns an array where the first entry is at index 0, not 1—using Dict[1] will return undefined for most words.

Revised JavaScript Code #

Here's a polished version with better p5.js integration and data handling:

let dictData;

function setup() {
  // Initialize p5 without a visible canvas
  createCanvas(0, 0);
  // Bind button click event properly
  const submitBtn = document.getElementById("sub");
  submitBtn.addEventListener("click", fetchWordData);
}

function fetchWordData() {
  const word = document.getElementById("input").value.trim();
  if (!word) return; // Skip empty input
  
  const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
  loadJSON(url, handleWordData, handleError);
}

function handleWordData(data) {
  dictData = data;
  // Safely access and log the first definition as an example
  if (dictData[0]?.meanings) {
    const firstDefinition = dictData[0].meanings[0].definitions[0].definition;
    console.log("Definition:", firstDefinition);
    // Add code here to update your UI with the definition
  }
}

function handleError(error) {
  console.error("Failed to fetch word data:", error);
  alert("Word not found or API error occurred!");
}

Key Improvements: #

• Added setup() to properly initialize p5.js.
• Used addEventListener for button clicks (more maintainable than inline assignment).
• Added input validation to avoid empty API requests.
• Used optional chaining (?.) to safely access nested API data (prevents crashes if the response structure changes).
• Added an error handler for failed API calls.
• Removed the unnecessary draw() loop—we only process data when the user clicks the button.

Final Notes #

• Ensure your extension has a valid manifest.json file (required for all Chrome extensions).
• Test the API response structure in your browser's dev tools to understand how to access additional data like phonetics or examples.

内容的提问来源于stack exchange，提问作者John Tsakiroglou