This is the 14th day of my participation in the August More Text Challenge

Series of articles:

  • Introduction to Browser Plug-ins
  • Manifest V3
  • Essential concept for browser plug-in development – user interaction
  • Essential concepts for browser plug-in development – Common techniques
  • Essential concepts for browser plug-in development – Customizing the browser experience
  • Essential concepts for browser plug-in development – customizing the Web experience
  • Key concepts for browser plug-in development — Experience optimization
  • Browser plug-in development and debugging

The extension is developed using the Chrome DevTools developer tool, but it is a little different from the normal web page. Because extenders are made up of multiple parts, they generally run in a separate environment.

💡 each time after modifying the code needs to reload the update plug-in, and refresh the current page.

The error log

If an extension encounters an error while running, the error log can be found on the Chrome :// Extensions Management page. To view the error log, find the appropriate extension card and click the error button

Modify the code logic as prompted, then click “Clear All” in the upper right corner of the page, reload the extension, and try to run it.

The background script

Background script is run in Service workers, it has no page, if you want to open its developer tools, you can find the corresponding extension card in Chrome :// Extensions management page. Click the “background page” link inside, you can open the background script developer tools

The pop-up page

When the user clicks Action (the extension icon button in the browser toolbar), if the extension pops up a page that also runs some code logic, the page can also open its developer tools for debugging.

The 💡 popup page will complete all Network requests before opening the developer tool, so in order to monitor Network requests, you can open the developer tool, under the Network column refresh, popup page to restart the Network request.

Content scripts

Content Script is embedded into the page to run the code, you can open the corresponding webpage developer tools for debugging.

💡 If you only want to view the output related to the extender in the console, you can click the drop-down box to select the appropriate source.

💡 Only errors that are triggered while the content script is running, or manually with console.warning and console.error, are logged in the developer tools console.

Overwrite the page

The overwrite page is presented as a TAB page, just like a regular web page, and can be debugged using developer tools.

💡 You can use developer tools to debug the Settings page of Full Page Options.