外部ツールを利用したスクリプトタグ埋め込みの検証設定

最終更新: 2026年8月21日

Autolingualによって実際に翻訳されたサイトを確認するためには、スクリプトタグを埋め込んでいただく必要がございます。

開発用サイトが存在せず、すでに公開されているサイト等において簡単なスクリプトタグの埋め込みが難しい場合、本ドキュメントで解説する外部ツールの利用によってAutolingualによる多言語化を簡単に再現することが可能です。

#基本概要

後述の拡張機能ツールにより、手元のブラウザ環境においてのみ、対象サイトに対してAutolingualスクリプトタグを挿入した状態を再現できます。
言語切り替えウィジェットの表示や、各種編集機能、ライブモードなどの各種機能をご利用いただけます。
言語別URL設定機能においては、プロキシサーバーの導入が必要なため、本ドキュメントの手法による検証には対応できません。

#Tampermonkeyによる検証方法

#拡張機能のインストール

https://chromewebstore.google.com/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo?utm_source=item-share-cb
上記のChrome Storeより、Tampermonkeyをお手元のブラウザにインストールしてください。

#導入設定

Tampermonkeyを有効にするためには、当該拡張機能においてディベロッパーモードをオンにすることが必要条件です。
下記ドキュメントを参考に、Tampermonkeyのディベロッパーモードをオンにしてください。
- https://developer.chrome.com/docs/extensions/reference/api/userScripts

#Autolingualでのプロジェクト作成

Autolingual側で、検証サイトをプロジェクトとして登録し、埋め込むスクリプトタグをコピーしておきます。

#Tampermonkeyでのスクリプトの登録

Tampermonkeyの設定画面から、以下のコードを入力して、当該UserScriptをオンにしてください。

コード

// ==UserScript==
// @name         Autolingual_Script_Test
// @namespace    http://tampermonkey.net/
// @version      2025-05-31
// @description  try to take over the world!
// @author       You
// @match        https://example.com/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // autolingual の <script> 要素を作成
    const script = document.createElement('script');
    script.src = 'https://cdn.autolingual.io/autolingualjs/v1.0.0/autolingual.js?id=xxxx';
    script.async = true;

    // <head> に追加
    document.head.appendChild(script);

    console.log('✅ autolingual.js を <head> に挿入しました');
})();

上記のコードのうち、下記についてはカスタマイズしてください
- @match：埋め込む対象のスクリプト
- script.src：前項で作成したプロジェクトに表示されるスクリプトタグ

#サイトの確認

正しくTampermonkeyが動作すれば、当該サイトを開いた際に言語選択ウィジェットが表示され、翻訳がされるようになります。

※あくまで拡張機能によってスクリプトタグを埋め込んだ形であるため、実際にサイトにスクリプトタグを埋め込んだ場合の挙動とは異なる場合がございます。特にサイト側で、外部のJavascript等の実行を制限している場合、翻訳等がされない場合がございます。ご不明点等ございましたら、担当者までお問い合わせください。

#ほかツールの紹介

前項のように、Autolingualスクリプトタグをサイトに埋め込める拡張機能はいくつか存在します。下記のうち、お客様の環境に適切なものをご検証ください。

#Tampermonkey

https://chromewebstore.google.com/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo

最も著名で、利用数の多い拡張機能
クロスブラウザ対応（Chrome, Firefox, Edge, Safari）

#Violentmoneky

https://chromewebstore.google.com/detail/jinjaccalgkegednnccohejagnlnfdag

Tampermonkeyの代替として有名
メモリ消費が少なく、軽量

#Custom JavaScript for Websites 2

https://chromewebstore.google.com/detail/ddbjnfjiigjmcpcpkmhogomapikjbjdk

シンプルに「ページごとにカスタムJSを追加する」拡張
ユーザーインターフェースが超シンプルで軽量

#User JavaScript and CSS

https://chromewebstore.google.com/detail/nbhcbdghjpllgmfilhnhkllmkecfmpld

特定のページに JS または CSS を手軽に注入できる
ページ単位でJSとCSSを個別に追加可

※本ドキュメントで紹介する外部ツールをご利用の際は、事前に各ツールの利用規約や注意事項等をご確認いただき、お客様ご自身の判断においてご利用ください。 ※本ドキュメントは、これら外部ツールの動作や検証結果の正確性を保証するものではありません。また、外部ツールの利用に起因するいかなる事象（損害やトラブルを含む）についても、弊社は一切の責任を負いかねますので、あらかじめご了承ください。