chrome 확장 'AJAX 요청' 을 함께 하 겠 습 니 다.

9866 단어 크롬 확장
chrome 은 한 번 의 업데이트 후 안전 을 고려 하여 content 를 완전히 금지 하 였 습 니 다.script 은 https 에서 http 에 ajax 요청 을 하면 정상 적 인 상황 에서 도 console 에서 힌트 를 줍 니 다.WEB 에 게 는 좋 은 일이 지만 확장 에 있어 서 는 나 쁜 일이 다.평소에 쉽게 데 이 터 를 요청 할 수 있 었 는데 지금 은 쉽 지 않 습 니 다.다행히 chrome 에서 background 를 제 공 했 습 니 다.script, content 이용script 와 backgroundscript 이전 통신 은 ajax 의 요청 을 실현 하기 위해 chrome 의 이 제한 을 뛰 어 넘 었 습 니 다.
content_script
이름 에서 부터 알 수 있 듯 이 contentscript 은 간접 광고 형 으로 일치 하 는 사이트 페이지 에 심 어 집 니 다.페이지 로 딩 완료 후 실행 합 니 다.content_script 의 가장 유용 한 점 은 사이트 페이지 의 DOM 을 조작 하 는 것 이다.평소에 전단 을 하 는 모든 작업 을 할 수 있 습 니 다. 예 를 들 어 DOM 을 추가, 수정, 삭제, DOM 값, 감청 사건 등 을 쉽게 할 수 있 습 니 다.그래서 남 의 로그 인 계좌 와 비밀 번 호 를 얻 으 려 면 아주 쉬 운 일 입 니 다. content 만 추가 하면 됩 니 다.script, 계 정과 비밀 번 호 를 감청 하 는 텍스트 상자 입 니 다. 값 을 받 은 후 자신의 서버 에 데 이 터 를 보 내 면 됩 니 다.따라서 확장 을 함부로 설치 하지 마라. 특히 공식 확장 라 이브 러 리 에서 다운로드 하지 않 는 확장 이다.
content 사용script
content 를 사용 해 야 합 니 다.script, manifest. json 에서 설정 해 야 합 니 다. 다음 과 같 습 니 다.
{

    "manifest_version": 2,

    "name": "My Extension",

    "description": "Extension description",

    "version": "1.0",



    "content_scripts": {

        "js": [

            "content.js"

        ]

    }

}

이렇게 하면 페이지 로 딩 이 완료 되면 content. js 를 불 러 오고 content. js 에서 페이지 요 소 를 제어 할 수 있 습 니 다.content. js 에서 jquery 를 사용 하려 면 jquery 파일 을 content. js 앞 에 추가 해 야 합 니 다. 예 를 들 어:
content_script jquery 사용
{

    "content_scripts": {

        "js": [

            "jquery.js",

            "content.js"

        ]

    }

}

js 를 불 러 올 수 있 는 것 외 에 contentscripts 에 서 는 CSS 파일 도 불 러 올 수 있 습 니 다. 예 를 들 어:
content_script CSS 사용
{

    "content_scripts": {

        "js": [

            "content.js"

        ],

        "css": ["style.css"]

    }

}

contentscripts 에서 중요 한 설정 은 matches 입 니 다. 확장 에 맞 는 웹 주 소 를 설정 하 는 데 사 용 됩 니 다. 예 를 들 어 이 확장 자 는 열 렸 을 때 만 사용 하고 싶 습 니 다. matches 는 이렇게 써 야 합 니 다.
일치 하 는 사이트 설정
{

    "content_scripts": {

        "js": [

            "content.js"

        ],

        "css": ["style.css"]

    },

    "matches": [

        "http://*.jgb.cn/*"

    ]

}

www. amazon. com 과 일치 하려 면 다음 과 같이 추가 합 니 다.
{

    "matches": [

        "http://*.jgb.cn/*",

        "http://*.amazon.com/*"

    ]

}

http 는 http 에 만 적 용 됩 니 다. amazon. com 과 같은 역 은 http 도 있 고 https 도 있 기 때문에 https 도 추가 해 야 합 니 다. 다음 과 같 습 니 다.
{

    "matches": [

        "http://*.jgb.cn/*",

        "http://*.amazon.com/*",

        "https://*.amazon.com/*"

    ]

}

background_script
chrome 확장 이 시 작 될 때 시 작 됩 니 다. 일 을 하고 명령 을 기다 리 고 있 습 니 다.페이지 요 소 를 제어 할 수 는 없 지만 contentscript 알려 주세요.ajax 와 마찬가지 로 페이지 가 열 릴 때 다른 서버 에 데 이 터 를 요청 하려 면 background 에 게 알려 줄 수 있 습 니 다.script, 요청 하 라 고 하고 돌아 온 데 이 터 를 contentscript。이렇게 하면 브 라 우 저의 안전 제한 에 영향 을 받 지 않 을 것 이다.
background 사용script
background 사용 하기script, manifest. json 에서 설정 해 야 합 니 다. 다음 과 같 습 니 다.
{

    "manifest_version": 2,

    "name": "My Extension",

    "description": "Extension description",

    "version": "1.0",



    "background": {

        "scripts": [

            "background.js"

        ]

    }

}

jquery 와 content 사용 하기scripts 와 마찬가지 로 jquery 파일 을 background. js 앞 에 추가 해 야 합 니 다. 예 를 들 어:
background 에서script 에서 jquery 사용
{

    "background": {

        "scripts": [

            "jquery.js",

            "background.js"

        ]

    }

}

크로스 필드
기본 적 인 상황 에서 Ajax 는 도 메 인 을 뛰 어 넘 을 수 없 지만 확장 은 도 메 인 을 뛰 어 넘 는 설정 을 제공 합 니 다. 앞의 에서 언급 한 바 와 같이 permissions 입 니 다. chrome 의 일부 기능 을 확장 할 수 있 을 뿐만 아니 라 JS 가 디 렉 터 리 사이트 에 대한 크로스 도 메 인 방문 도 할 수 있 습 니 다. 예 를 들 어:
{

    "permissions": [

        "http://www.jgb.cn/" //       www.jgb.cn

    ]

}

이상 의 설정 이 있 습 니 다. 이때 background 를 어떻게 통과 하 는 지 볼 수 있 습 니 다.scripts 가 Ajax 요청 을 실 현 했 습 니 다.
background 에 요청 보 내기
contentscript 에서 backgroundscript 발송 요청 은 여러 가지 방식 이 있 습 니 다. 여 기 는 제 가 자주 사용 하 는 것 만 보 여 줍 니 다. 대부분의 상황 을 만족 시 킬 수 있 습 니 다. 다른 방법 은 문 서 를 조회 하 십시오. 방법 은 다음 과 같 습 니 다.
chrome.extension.sendMessage({}, callBack);

sendmessage () 방법 은 두 개의 인자 가 있 습 니 다. 첫 번 째 로 보 낼 데 이 터 는 post 요청 처럼 두 번 째 는 리 셋 함수 입 니 다.여재 contentscript 에서 단 추 를 누 르 면 background 에 문자열 을 보 냅 니 다.script
$(function(){

    $("#button").click(function(){

        chrome.extension.sendMessage({'txt': '        '}, function(d){

            console.log(d); //             

        });

    });

})

background 에서 content 요청 을 감청 합 니 다.
background 에서 content 요청 을 감청 하려 면 chrome. extension. onMessage. addListener () 를 사용 하 십시오. 예 는 다음 과 같 습 니 다.
chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){});

object Request 는 요청 한 매개 변수 입 니 다. 이전 예 는 {'txt' 입 니 다. '여 기 는 보 낸 내용'} 입 니 다. object Request. txt 를 통 해 내용 을 얻 을 수 있 습 니 다.사실은 사전 이다.
sendResponse, 값 을 되 돌려 주 는 방법 으로 content 에 데 이 터 를 되 돌려 줄 수 있 습 니 다.script, 그러면 간단 한 예 는:
chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){

    var strText = objRequest.txt;

    //      Ajax      

    $.ajax({

        url: 'http://www.jgb.cn/',

        type: 'POST',

        data: {'txt': strText},

        dataType: 'json',

    }).then(function(){

        //        content_script

        sendResponse({'status': 200});

    }, function(){

        //        content_script

        sendResponse({'status': 500});

    });

});

이렇게 가면 contentscript to backgroundscript 요청 발송 및 background 사용script 에서 ajax 요청 을 수행 하 는 목적 은 매우 간단 하고 사용 하기 쉽 습 니 다.
이 를 바탕 으로 조건 과 데 이 터 를 추가 하면 수신 과 데 이 터 를 보 내 는 작업 을 잘 할 수 있다.예 를 들 어 자신의 서버 에 데 이 터 를 요청 하거나 보 내 는 것 이다.
chrome 시작 파 라 메 터 를 수정 하여 https 페이지 에서 http 페이지 에 ajax 요청 을 할 수 있 습 니 다.
background 사용 말고script 에서 Ajax 요청 을 시작 하 는 동시에 chrome 의 시작 매개 변 수 를 수정 하여 이 목적 을 달성 할 수 있 습 니 다.매개 변 수 는: -- allow - running - insecure - content, 조작 방법:
1, 오른쪽 클릭 chrome 단축 키, 속성 선택
2. 목표 의 마지막 에 -- allow - running - insecure - content 를 입력 하 십시오. 중간 에 빈 칸 이 있 습 니 다.
이렇게 하면 chrome 은 https 페이지 에서 http 에 ajax 요청 을 할 수 있 습 니 다.이 방법 은 목적 을 달성 할 수 있 지만 추천 하지 않 는 다. 왜냐하면 과학적 이지 않 기 때문이다.

좋은 웹페이지 즐겨찾기