Tampermonkey Vscode Devtools: Simplify Script Management and Debugging

Author

Reads 283

Google Browser on Laptop
Credit: pexels.com, Google Browser on Laptop

Tampermonkey and VSCode DevTools are powerful tools for managing and debugging scripts, but they can be overwhelming for beginners.

Tampermonkey is a popular browser extension that allows you to run custom scripts on websites, with over 10 million users worldwide.

Managing multiple scripts can be a challenge, but Tampermonkey's user-friendly interface makes it easy to create, edit, and manage scripts.

With VSCode DevTools, you can debug your scripts in a visual interface, with features like breakpoints, console logging, and variable inspection.

VSCode DevTools is highly customizable, allowing you to tailor the interface to your specific needs and workflow.

Development Environment

Setting up a development environment for Tampermonkey scripts can be a challenge. A well-structured environment is crucial for efficient development.

The article highlights the importance of a comfortable development environment, citing issues such as missing syntax completion and formatting difficulties.

Here are some key features of a good development environment:

  • Automatic generation of UserScript Header
  • Support for ESNext, ES Module, and TypeScript
  • Style systems: CSS Modules, SCSS, Sass, Less, and Stylus
  • Static resources: importing images and converting SVGs to Base64
  • Extensions: Rollup-based plugins for on-demand installation

With the right tools, you can focus on writing code, not wrestling with environment issues.

Oil Monkey Plugin

Credit: youtube.com, General Purpose Real Estate Properties Web Scraper - Part 3 - organizing development environment

The Oil Monkey Plugin is a lightweight solution for adding custom functionality to web pages. It provides a platform for users to write and run scripts directly in their browser.

One of the key benefits of Oil Monkey Plugin is its ability to bypass the need to build and package a development environment for every small feature. This can be a hassle, especially when compared to the abundance of granular applications in the market.

Oil Monkey Plugin relies heavily on content scripts, which run user-written code directly on the webpage, providing access to browser-specific functions through the GM_xxxx API.

To get started with Oil Monkey Plugin, users can write scripts in the built-in editor, which will take effect immediately. Scripts can be shared quickly through platforms like GitHub and GreasyFork.

Here's a basic template for an Oil Monkey script:

```html

// ==UserScript==

// @name New Userscript

// @namespace http://tampermonkey.net/

// @version 0.1

Close-up of a smartphone displaying a billing app interface on a reflective surface.
Credit: pexels.com, Close-up of a smartphone displaying a billing app interface on a reflective surface.

// @description try to take over the world!

// @author You

// @match https://www.tampermonkey.net/documentation.php?ext=dhdg

// @icon https://www.google.com/s2/favicons?domain=tampermonkey.net

// @grant none

// ==/UserScript==

(function(){'use strict';// Your code here...})();

```

This template includes metadata like script name, namespace, version, and author information. The content of the script is enclosed within the `(function(){...})();` block.

搭建舒适的开发环境

缺少语法补全和自动提示会让开发工作变得痛苦。这个问题可以通过集成 ESLint 来解决。

难以格式化代码会让代码看起来凌乱不堪。这个问题可以通过使用 Rollup、Babel、ESLint 和 TypeScript 来解决。

同步到远程仓库和做代码分发是一个常见的问题。create-tampermonkey - npm 可以帮助解决这个问题,提供一个一键搭建舒适的油猴脚本开发环境。

使用新语法时,需要考虑跨浏览器兼容性。create-tampermonkey - npm 支持 ESNext、ES Module 和 TypeScript,可以帮助解决这个问题。

代码越写越多,没有模块化管理会让开发工作变得混乱。create-tampermonkey - npm 支持 Rollup,可以帮助解决这个问题。

没有 TypeScript,很难保证长期维护。create-tampermonkey - npm 支持 TypeScript,可以帮助解决这个问题。

以下是 create-tampermonkey - npm 支持的功能:

Using an External Code Editor with GitHub

You can use an external code editor with GitHub to write and edit your code.

GitHub has a feature called GitHub Desktop that allows you to sync your local repository with the remote repository on GitHub.

This means you can write code in your preferred code editor and then sync it with your GitHub repository.

GitHub supports integration with many popular code editors such as Visual Studio Code, Atom, and Sublime Text.

Credit: youtube.com, Using the GitHub Web Based Editor

These editors allow you to clone a repository, make changes, and then push those changes back to the GitHub repository.

To integrate your code editor with GitHub, you'll need to set up a Git repository on GitHub and then link it to your code editor.

This will allow you to access your repository from within your code editor and make changes to your code.

GitHub also provides a feature called GitHub Codespaces that allows you to create a code environment in the cloud.

This means you can write and edit code in your web browser, without needing to install any software on your local machine.

With GitHub Codespaces, you can access your repository and make changes to your code from anywhere.

GitHub Codespaces is ideal for collaborative development, as multiple developers can work on the same codebase in real-time.

Script Management

Script management is a crucial aspect of Tampermonkey and VSCode DevTools. Tampermonkey allows you to manage your scripts in a centralized location, making it easy to keep track of your code.

Credit: youtube.com, Automatic Signups with Tampermonkey| Unscripted Coding

You can create, edit, and delete scripts from the Tampermonkey dashboard, which is accessible from within VSCode DevTools. This dashboard provides a clear overview of all your scripts, including their status and any errors that may have occurred.

To manage scripts effectively, it's essential to keep them organized and up-to-date.

Tabs.ExecuteScript()

Tabs.ExecuteScript() is a powerful function that allows you to inject code into pages whose URL can be expressed using a match pattern. It's a crucial tool for any script manager.

You must have the permission for the page's URL, either explicitly as a host permission or via the activeTab permission. Some special pages, like reader view, view-source, and PDF viewer pages, do not allow this permission.

You can also inject code into pages packaged with your own extension without needing any special permissions. This is a huge advantage for developers who want to create custom scripts for their own extensions.

Credit: youtube.com, Chrome Extension Tutorial 36: chrome tabs executeScript - Part 3

However, you cannot inject code into the browser's built-in pages, such as about:debugging, about:addons, or the page that opens when you open a new empty tab. This is a security feature to prevent unauthorized access to sensitive areas of the browser.

If you want to inject code into all frames of the current page, you can set the allFrames property to true. But be careful not to use this property to interpolate untrusted data into JavaScript, as this could lead to a security issue.

You can specify the path to the script as a relative URL, starting at the extension's root, to make the code work cross-browser. This is a useful feature for developers who want to create scripts that work on multiple browsers.

For more insights, see: Devtools Pause Page

Publish Script

To publish your script, you'll need to run npm run build after local development is complete.

This command builds the production version and uploads the code to Github or Gitee.

Credit: youtube.com, How to Share Google Apps Script learn about Sharing and Deploying Scripts

You can directly distribute your script using the Raw URL of the file on Github or Gitee.

However, this method has a drawback: it's difficult to track download numbers, and you'll need to maintain two repositories on Github and Gitee.

Alternatively, you can upload your script to the script platform greasyfork.org and publish it after logging in.

Frequently Asked Questions

What language is Tampermonkey?

Tampermonkey uses JavaScript, a popular programming language for web page modification. This allows users to create custom scripts to enhance their browsing experience.

Jeannie Larson

Senior Assigning Editor

Jeannie Larson is a seasoned Assigning Editor with a keen eye for compelling content. With a passion for storytelling, she has curated articles on a wide range of topics, from technology to lifestyle. Jeannie's expertise lies in assigning and editing articles that resonate with diverse audiences.

Love What You Read? Stay Updated!

Join our community for insights, tips, and more.