ArticleSync - マルチプラットフォーム記事同期プラグイン

ArticleSyncは、ユーザーが複数のソーシャルプラットフォームに記事を簡単に同期・公開できるブラウザ拡張機能です。ローカルの下書きから、知乎（Zhihu）やBilibiliなどの主要プラットフォームに記事を公開することをサポートしています。これにより、異なるソーシャルメディアプラットフォーム間で記事を同期する作業が、シンプルかつ効率的になるワンストップソリューションを提供します。

ブラウザ拡張機能の仕組みに基づき、ローカルでログインしているアカウントを自動的に検出し、アカウント情報の漏洩や環境の異常といったリスクを防ぎます。

Chrome Manifest V3ブラウザ拡張機能の標準に基づいて開発されており、カーネルのバージョン要件にご注意ください。

背景

ご存知の通り、私は最近、いくつかのブログプラットフォームと多くのソーシャルサイトを新たに使い始めました。もし、それらすべてで活発に更新を続けたいと思ったらどうすればいいでしょうか。（私がまだ生きていることを証明するために）ついでに、ワンクリックで記事を転載することもできます。

私が最も頻繁に更新するのは自分の小さなサイトですが、他のプラットフォームはたまにしか更新しません。しかし、毎回手動で投稿するのは面倒です。そこで、ローカルでログインしているアカウントを自動検出し、自動で投稿してくれるプラグインが作れないかと考えました。

「自分のことは自分でやる」ということわざの通り、数日間いじくり回して、なんとか使えるものができました。残りの部分は時間があるときに更新します。お金をくれるなら話は別ですが。

このプラグインにはまだ多くの未完成な部分があり、本番環境で複数のプラットフォームでのテストも行っていません。エラーが発生するのはごく普通のことですので、その際はIssueを提出するか、自分で修正してPRを送ってください。てへぺろ〜

話の邪魔にならないように、スクリーンショットは最後に載せておきました。

それと、オープンソースは大変なので、スターを付けてくれると嬉しいです。へへへ〜

本当は、私のコミュニティプラットフォームを自動でフォローするような、個人的な機能を追加しようかとも思いました。

機能と特徴

  • マルチプラットフォーム対応：知乎（Zhihu）、Bilibiliなどの主要プラットフォームや、自作のオープンソースCMSシステムをサポートしています。
  • ステータス追跡：プラグインのインターフェースで記事の同期状況を確認できます。
  • アカウント管理：プラグインに連携されている各プラットフォームのアカウント情報を確認できます。
  • 高い拡張性：開発者はアダプターパターンを通じて、簡単により多くのプラットフォームに拡張できます。
  • 安全性と信頼性：ブラウザ拡張機能の仕組みに基づいているため、アカウントの安全性を確保し、情報漏洩などのリスクを回避します。

Todoリスト

  • [ ] 独立した記事エディタ
  • [ ] 画像のワンクリック同期
  • [x] MarkdownとHTMLの相互変換
  • [ ] サードパーティの画像ホスティングサービス
  • [ ] 複数アカウント管理
  • [ ] マルチOSクライアントバージョン
  • [ ] ワンクリックAI要約
  • [ ] 動画の同期
  • [ ] タグ、カテゴリのサポート
  • [ ] より親切なエラーハンドリング
  • [ ] より多くのプラットフォームへの対応

対応プラットフォーム

メディア カテゴリ ステータス URL 対応形式 更新日時
Bilibili (哔哩哔哩) 主要セルフメディア 対応済み https://bilibili.com/ HTML 2024/10/13
知乎 (Zhihu) 主要セルフメディア 対応済み https://www.zhihu.com/ HTML 2024/10/13
博客园 (Cnblogs) ブログ 対応済み https://cnblogs.com/ HTML 2024/10/14
新浪头条 (Sina Headline) 主要セルフメディア 対応済み 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            # 拡張機能のポップアップUI
│   │   ├── popup.js
│   │   ├── popup.html
│   ├── options          # 拡張機能のオプションページ
│   │   ├── options.js
│   │   ├── options.html
│   ├── dist             # ビルド後のファイル
│   ├── manifest.json    # Chrome拡張機能のマニフェストファイル
├── webpack.config.js    # Webpack設定ファイル
├── package.json         # プロジェクト設定ファイル
├── README.md            # プロジェクト説明ファイル
├── .gitignore           # Git無視ファイル

貢献ガイド

プロジェクトへの貢献を歓迎します！改善提案や新しいプラットフォームの追加を希望される場合は、以下の手順に従ってください：

  1. リポジトリをフォークします。
  2. 新しいブランチを作成します。
  3. 変更をコミットします。
  4. プルリクエストを作成します。

フィードバック

使用中に問題や提案がありましたら、以下の方法でお知らせください：

  • Issue を提出
    • バグ
    • ブラウザのバージョン: Chrome 129.0.6668.90
    • カーネルのバージョン: 129.0.6668.90
    • オペレーティングシステム: Windows 10
    • プラグインのバージョン: 1.0.0
    • 再現手順:
    • エラーの説明:
    • 提案
    • 説明:
    • 期待される効果:
    • サポート
    • プラットフォーム:
    • URL:
    • アカウント: (あれば尚可)
  • ブログ：阿珏酱のBlog にアクセスしてコメントを残す

寄付 ☕

私はかわいいので、お金をください！
I am cute, please give me money!

image

ライセンス

Copyright (c) 2024-present, iAJue

このプロジェクトは GPL-3.0 ライセンスに従います。

スクリーンショット