Story Downloader - Facebook and Instagram

Download stories (videos and images) from Facebook and Instagram.

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

作者
oscar370
今日安裝
2
安裝總數
1,510
評價
6 1 2
版本
2.0.6
建立日期
2024-09-08
更新日期
2025-05-20
尺寸
7.4 KB
授權條款
GPL3
腳本執行於

Story Downloader - Facebook & Instagram

A user script to download stories (videos & images) from Facebook and Instagram — supports both production and development modes!


For Users

Install directly from GreasyFork:
https://greasyfork.org/en/scripts/507431-story-downloader-facebook-and-instagram

Features:

  • Works on Facebook and Instagram web
  • Downloads stories in one click
  • Automatically detects videos and images
  • Lightweight and open-source

For Developers

If you want to contribute or run this script in development mode using TypeScript, follow these steps:

Requirements

  • Node.js & npm
  • Tampermonkey (or similar user script manager)
  • A Chromium-based browser (Chrome, Edge, Brave, etc.)
  • A text editor (e.g. VSCode)

Important Tampermonkey Setup

To use file:/// paths in development:

  1. Go to your browser's Extensions page.
  2. Enable Developer Mode.
  3. Open the Tampermonkey extension settings.
  4. Enable the option: "Allow access to file URLs."

This is required for Tampermonkey to load the script directly from your local machine.

Clone the repository

git clone https://github.com/oscar370/Story-Downloader---Facebook-and-Instagram.git
cd Story-Downloader---Facebook-and-Instagram

Install dependencies

npm install

Development Mode

  1. Set your desired output path in a .env file at the project root:
DEV_REQUIRE_PATH=file:///[your-path]/dist/script.dev.user.js

Use forward slashes / even on Windows.

  1. Run the development watcher:
npm run dev
  1. Create a dev userscript in Tampermonkey with the following header:
// ==UserScript==
// @name         Story Downloader - Facebook and Instagram - Dev
// @namespace    https://github.com/oscar370
// @version      0.0.0
// @description  Download stories (videos and images) from Facebook and Instagram.
// @author       oscar370
// @match        *.facebook.com/*
// @match        *.instagram.com/*
// @grant        none
// @license      GPL3
// @require      file:///[your-path]/dist/script.dev.user.js
// ==/UserScript==

Refresh your browser tab to reload changes after each build!

Production Build

To build the optimized userscript for sharing:

npm run build

This generates:

dist/script.prod.user.js

You can upload this file to GitHub and link it on GreasyFork.

Project Structure

.
├── dist/
│   ├── script.dev.user.js
│   └── script.prod.user.js
├── src/
│   └── main.ts
├── .env
├── build-dev-watch.js
├── build-prod.js
├── package.json
├── tsconfig.json
└── README.md

Contributing

Pull requests, issues, and suggestions are welcome! Just make sure to describe the change clearly and follow the coding style.


Happy downloading! 🎉