- Products -


Software


NEWS


Special



- Knowledge -


Category × Tag



- Like -

公開
作成日:2022/3/24
更新日:2022/5/18

chrome拡張から外部URLにリクエストを送信する

・chrome拡張からWEBサービスにリクエスト投げ、その応答を扱いたい。またはデータ更新してしまいたい。というケースがあります。それを実現する方法を説明します。

・検証は、rapid api等を利用するのがオススメ。(簡単に呼び出せるので)
https://api.rakuten.net/BigLobster/api/url-shortener-service

使い方


・フォルダ:chrome_ex

・ファイル:manifest.js (以下のpermissionsの部分が重要。これを記載する必要がある)

{

    "manifest_version": 2,

    "name": "api_rep_sample",

    "description": "この拡張機能の説明",

    "version": "1.0",

    "content_scripts": [{

        "matches": [

            "https://この拡張機能を実行するサイトドメイン/*"

        ],

        "js": [

            "jquery-3.6.0.js",

            "script.js"

        ]

    }],

    "permissions": [

        "https://url-shortener-service.p.rapidapi.com/",

        "リクエストを許可するサイトドメインを記載。複数ある場合はカンマ区切りで複数記載。"

    ]

}


・ファイル:script.js (リクエストを投げて、必要な処理を行う)

// https://api.rakuten.net/BigLobster/api/url-shortener-service
const settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://url-shortener-service.p.rapidapi.com/shorten",
    "method": "POST",
    "headers": {
        "content-type": "application/x-www-form-urlencoded",
        "x-rapidapi-key": "APIキー文字列",
        "x-rapidapi-host": "url-shortener-service.p.rapidapi.com"
    },
    "data": {
        "url": "https://google.com/"
    }
};

$.ajax(settings).done(function(response) {
    console.log(response);
    alert(response.result_url);
});


参考


https://symfoware.blog.fc2.com/blog-entry-1516.html


Category



Tag




関連記事


{{tmp.name}}

{{article.category}} {{article.title}}