Got it, let's break down what's going wrong here and fix it step by step. The error you're seeing is a mix of incorrect permission configuration and not handling Chrome's asynchronous tab operations properly.

1. Fix Manifest Permissions #

Your current permission list has redundant, overly specific, and incomplete entries. Chrome needs clear, broad-enough permissions to access Yelp's pages and manipulate tabs. Update your manifest.json permissions section to this:

"permissions": [
  "tabs",
  "https://www.yelp.com/*"
]

Why this works: #

• "tabs" gives you access to tab management APIs
• "https://www.yelp.com/*" grants permission to all subpages of Yelp, which covers the specific business page you're targeting (no need to list individual URLs)
• Remove unused permissions like "bookmarks" and overly broad "http://*/"/"https://*/" to follow Chrome's principle of least privilege

2. Fix Asynchronous Tab Creation & Loading Issues #

Chrome's chrome.tabs.create is asynchronous—your original code tries to query the new tab immediately, which often runs before the tab is fully registered or loaded. Plus, even if you get the tab ID, the page content won't be ready yet. Here's the corrected popup.js:

let tab_title = '';
let tab_id = '';

function display_h1(results) {
  const descriptionText = results[0] || 'Description element not found';
  document.querySelector("#id1").innerHTML = `
    <p>tab title: ${tab_title}</p>
    <p>Business description: ${descriptionText}</p>
    <p>tab id: ${tab_id}</p>
  `;
}

// Create the tab and wait for it to load before accessing content
chrome.tabs.create(
  {url: 'https://www.yelp.com/biz/bareburger-forest-hills?osq=burger', active: false},
  function(newTab) {
    tab_id = newTab.id;
    // Wait for the tab to finish loading before fetching content
    const loadListener = (tabId, changeInfo) => {
      if (tabId === newTab.id && changeInfo.status === 'complete') {
        // Get the updated tab title (since it was empty when the tab was first created)
        chrome.tabs.get(tabId, (updatedTab) => {
          tab_title = updatedTab.title;
          // Execute script to grab the description
          chrome.tabs.executeScript(tabId, {
            code: 'document.querySelector("[itemprop=description]")?.textContent'
          }, display_h1);
        });
        // Clean up the listener so it doesn't fire for other tabs
        chrome.tabs.onUpdated.removeListener(loadListener);
      }
    };
    chrome.tabs.onUpdated.addListener(loadListener);
  }
);

Key improvements here: #

• We use the chrome.tabs.create callback to get the new tab directly instead of querying all inactive tabs (more reliable)
• We listen for the complete status on the tab to ensure the page is fully loaded before accessing DOM elements
• We fetch the updated tab title after loading (since the initial title is empty when the tab is first created)
• We use optional chaining (?.) to avoid errors if the description element isn't found

3. Verify Your Setup #

• Make sure your popup.html remains as-is (it's already correct for displaying the content)
• Ensure your icon file (hello-16.png) exists in the extension directory

After making these changes, reload your extension in Chrome's extensions page (chrome://extensions/), and the permission error should disappear. You'll see the tab title and business description load in the popup once the Yelp tab finishes loading.

内容的提问来源于stack exchange，提问作者yu shenghui