Chrome 확장 프로그램에서 JSONP로 상호 작용해야하는 경우

Chrome 확장 프로그램은 기본적으로 외부 URL 참조를 허용하지 않습니다.

http://에서 시작하는 외부 파일을 사용할 수 있도록 하려면 manifest.json에서 정의해 줘야 합니다.

도서관

다운로드하고 이벤트 페이지에서 지정

{
  "manifest_version": 2,
  "background":
    {
      "scripts": ["assets/js/jquery.min.js", "assets/js/floaty-color-clock-chrome.js", "assets/js/jp-prefecture.min.js"],
      "persistent": false
    }
}

애널리틱스

Content Security Policy 사양을 추가해 보겠습니다. 아래는 프로젝트 자체가 내부에 저장하는 js 파일과 애널리틱스에 대한 참조를 허용합니다.

  "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'"

쓰기 방법에 대한 자세한 내용은 여기
CSP의 정책 지시문

이렇게

{
  "manifest_version": 2,
  "background":
    {
      "scripts": ["assets/js/jquery.min.js", "assets/js/floaty-color-clock-chrome.js", "assets/js/jp-prefecture.min.js"],
      "persistent": false
    },
  "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'"
}

http 통신이 거부됨

"content_security_policy"에서 jsonP의 도메인을 지정하면 잘 될 것 같지만 https 이외의 통신은 거부됩니다.

  "content_security_policy": "script-src 'self' http://example.com; object-src 'self'"

이것은 움직이지 않는다. 하지만, 참조하고 있는 데이터가 JSON을 준비하고 있지 않은 경우는 무리하게도 JSONP로 움직이고 싶다.

JSONP에서 필요한 부분만 정규 표현식으로 검색

먼저 manifest.js에서 JSONP를받는 도메인을 허용합니다."permissions": [ "activeTab", "http://www.drk7.jp/"],
이렇게

{
  "manifest_version": 2,
  "background":
    {
      "scripts": ["assets/js/jquery.min.js", "assets/js/floaty-color-clock-chrome.js", "assets/js/jp-prefecture.min.js"],
      "persistent": false
    },
  "permissions": [ "activeTab", "http://www.drk7.jp/"],
  "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'"
}

에서 JSONP를 가공하는 js 파일에서 이렇게 설명

function extractWeatherData (jsonp) {
    var re = /^[^{]*({.*})[^}]*$/; //正規表現を変数に格納
    var data = jsonp.match(re); // 正規表現をjsonpに対して実行

    if (data) {
        var weatherData = JSON.parse(data[1]);
        processWeatherData (weatherData);
    }
}

JSONP에는 아래와 같이 콜백이 기재되어 있습니다만, 그 부분을 제외해 data에 격납하고 있습니다.

drk7jpweather.callback ( //←この.callbackが不要
{
    "link": "http://www.drk7.jp/weather/xml/13.xml",
    "pref": {},
    "author": "気象庁",
    "title": "weather forecast xml",
    "pubDate": "Sun, 1 May 2016 18:00:02 +0900",
    "description": "気象庁の天気予報情報を XML で配信。1日1回 AM 6:00 ごろ更新。",
    "managingEditor": "drk7.jp"
    }
)

실행하면 다음 부분을 취할 수 있습니다.

{
    "link": "http://www.drk7.jp/weather/xml/13.xml",
    "pref": {},
    "author": "気象庁",
    "title": "weather forecast xml",
    "pubDate": "Sun, 1 May 2016 18:00:02 +0900",
    "description": "気象庁の天気予報情報を XML で配信。1日1回 AM 6:00 ごろ更新。",
    "managingEditor": "drk7.jp"
    }

나머지는 json과 동일하기 때문에 data [i]로 꺼낼 수 있습니다.

개발하고 있던 앱이, 자신의 서버상에서는 문제 없게 움직이고 있었는데, 크롬 익스텐션에서는 움직이지 않게 되어 버렸다. 서버의 코드와 크롬 확장 코드는 괴리하고 싶지 않았기 때문에 이렇게했습니다. 똑같이 고생하고 있는 분의 참고가 되면.

//뭐, 결국 github 페이지가 XHR을 허가하지 않았기 때문에 각각에 맞춘 통신을 쓰는 하메가 되어 버렸습니다만…

개발하고 있던 확장은 이쪽

Floaty Color Clock - Chrome 웹 스토어
리포지토리



꼭 사용해보십시오. 코드에의 돌진도 기다리고 있습니다.