多平台文章同步瀏覽器外掛程式 - ArticleSync
折腾代码

多平台文章同步瀏覽器外掛程式 - ArticleSync

ArticleSync - 多平台文章同步插件

ArticleSync 是一個瀏覽器擴充功能，幫助使用者輕鬆將文章同步發佈到多個社交平台。支援將文章從本地草稿發佈到各大平台，如知乎、Bilibili 等。它提供了一站式解決方案，讓你在不同的社交媒體平台上同步文章變得簡單高效。

基於瀏覽器外掛程式模式，自動偵測本地登入帳號，杜絕帳號洩露、環境異常等風險

基於 Chrome Manifest v3 瀏覽器擴充功能標準開發，請注意核心版本要求

背景

你也知道，我這又一下子多了好幾個部落格平台，和一大堆社交網站，如果我想讓它們之間都能保持活躍的更新怎麼辦。(證明我還活著) 還能一鍵盜文章

我最常更新的就是我自己的小破站了，但是其他平台，我可能就只是偶爾更新一下，但是又不想每次都去手動發佈，所以我就想，能不能寫一個外掛程式，自動偵測我本地登入的帳號，然後自動發佈呢。

正所謂，自己動手豐衣足食。鼓搗了好幾天，勉強算是能用的樣子，剩下的就有空再更新了。除非你給我錢

外掛程式還有很多不完善的地方，我也沒有多平台正式在生產環境中實測，如遇報錯，實屬正常，那就提交 issue 吧，或者自己改改，改好了再提交 PR 吧。嘻嘻~

為了不影響我說話，截圖放最後了

還有，開源不易，來個 star 吧，嘿嘿嘿~

本來想加一點私貨進去的，自動關注我的社群平台

功能特色

  • 多平台支援：支援知乎、Bilibili 等各大主流平台，支援自建開源 CMS 系統。
  • 狀態追蹤：在外掛程式介面中查看文章的同步狀態。
  • 帳號管理：可查看與外掛程式綁定的各平台帳號資訊。
  • 可擴展性強：支援開發者透過轉接器模式輕鬆擴展到更多平台。
  • 安全可靠：外掛程式基於瀏覽器擴充功能模式，確保帳號安全，避免帳號洩露等風險。

待辦事項

  • [ ] 獨立文章編輯器
  • [ ] 圖片一鍵同步
  • [x] Markdown 與 HTML 互轉
  • [ ] 第三方圖床系統
  • [ ] 多帳號管理
  • [ ] 多系統客戶端版本
  • [ ] 一鍵 AI 總結
  • [ ] 影片同步
  • [ ] 標籤、分類的支援
  • [ ] 更友善的錯誤處理
  • [ ] 更多平台的接入

支援管道

媒體

媒體行業

狀態

網址

支援類型

更新時間

嗶哩嗶哩

主流自媒體

已支援

https://bilibili.com/

HTML

2024/10/13

知乎

主流自媒體

已支援

https://www.zhihu.com/

HTML

2024/10/13

部落格園

部落格

已支援

https://cnblogs.com/

HTML

2024/10/14

新浪頭條

主流自媒體

已支援

https://weibo.com/

HTML

2024/10/14

emlog

開源 CMS

已支援

https://www.emlog.net/

HTML

2024/10/14

WordPress

開源 CMS

已支援

https://cn.wordpress.org/

HTML,Markdown

2024/10/14

Discuz

開源 CMS

已支援

https://www.discuz.vip/

Markdown,Text

2024/10/15

安裝說明

  1. 複製儲存庫到本地：

    git clone https://github.com/iAJue/Articlesync.git

  2. 進入專案目錄：

    cd articlesync

  3. 安裝依賴：

    npm install

  4. 打包專案

    npm run build

  5. 載入外掛程式：

    • 開啟 Chrome 瀏覽器，進入 chrome://extensions/。
    • 啟用 開發者模式。
    • 點擊 載入已解壓的擴充功能，選擇 dist/ 資料夾。

  6. 開發

    1. 啟動開發環境

      npm run watch-reload

    2. 已配置熱更新，每次修改程式碼後，外掛程式將自動打包，並且 Chrome 會自動重新載入外掛程式。

如何新增一個轉接器

  1. 在 src/adapters 目錄下建立一個新的轉接器檔案，例如 PlatformAdapter.js。

  2. 繼承 BaseAdapter 類別，並實作以下方法：

    • getMetaData(): 取得目前頁面的中繼資料。
    • addPost(post): 新增文章。
    • editPost(post, post_id): 編輯文章。
    • uploadFile(file): 上傳檔案。
    • 定義 constructor 建構函式，設定轉接器的版本、類型和名稱或其他初始化資料。 
      constructor() {
    super();
    this.version = '1.0';
    this.type = 'Twitter';
    this.name = '推特';
}

  3. 在 src/adapters/adapters.js 中匯入並註冊新的轉接器。

專案結構 

├── src
│   ├── adapters         # 各平台的轉接器
│   │   ├── ZhiHuAdapter.js
│   │   ├── BilibiliAdapter.js
│   ├── contents         # 內容腳本
│   ├── background.js    # 後台腳本
│   ├── popup            # 外掛程式彈窗介面
│   │   ├── popup.js
│   │   ├── popup.html
│   ├── options          # 擴充功能選項頁面
│   │   ├── options.js
│   │   ├── options.html
│   ├── dist             # 打包後的檔案
│   ├── manifest.json    # Chrome 外掛程式清單檔案
├── webpack.config.js    # Webpack 設定檔
├── package.json         # 專案設定檔
├── README.md            # 專案說明檔案
├── .gitignore           # Git 忽略檔案

貢獻指南

歡迎對專案進行貢獻！如果你有任何改進意見或想要新增新的平台支援，請遵循以下步驟：

  1. Fork 儲存庫。
  2. 建立一個新的分支。
  3. 提交你的變更。
  4. 發起一個 Pull Request。

回饋

如果你在使用過程中遇到任何問題或建議，請透過以下方式告訴我們：

  • 提交 Issue
    • 錯誤 (BUG)
    • 瀏覽器版本: Chrome 129.0.6668.90
    • 核心版本: 129.0.6668.90
    • 作業系統: Windows 10
    • 外掛程式版本: 1.0.0
    • 重現步驟:
    • 錯誤描述:
    • 建議
    • 描述:
    • 預期效果:
    • 支援
    • 平台:
    • 網址:
    • 帳號: (有最好)
  • 部落格：造訪 阿珏醬のBlog 留言

贊助 ☕ 

我很可愛，請給我錢！
I am cute, please give me money!

image

授權條款

Copyright (c) 2024-present, iAJue

本專案遵循 GPL-3.0 授權條款。

截圖

© 2016 - 2025 阿珏醬のBlog
Powered by ❤️ with Hugo and Stack Theme.