동일한 페이지에 Greasemonkey 스크립트를 여러 번 삽입

Greasemonkey 및 JavaScript를 처음 사용하는 사용자의 경우 사용자 스크립트에서 다음을 수행해야 하는 공통 요구 사항이 발생합니다. 페이지를 새로 고치지 않고 여러 번 실행됩니다. 이 시나리오는 전체 페이지 다시 로드를 트리거하지 않고 Ajax를 사용하여 Amazon 검색과 같은 요청이 발생할 때 필수적입니다.

솔루션: waitForKeyElements() 유틸리티 활용

To 이러한 요구를 효과적으로 해결하기 위해 waitForKeyElements() 유틸리티는 강력하고 간단한 솔루션을 제공합니다. 이 유틸리티는 지정된 요소를 모니터링하고 요소의 내용이 변경될 때마다 콜백 함수를 실행합니다. 다음은 jQuery 및 waitForKeyElements를 활용하여 Amazon 검색 결과를 수정하는 전체 스크립트입니다.

// @name     _Amazon Search, alter results
// @include  http://www.amazon.com/s/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==

function addCustomSearchResult (jNode) {
    jNode.prepend (
        '<div>

구현 세부사항:

• waitForKeyElements() 유틸리티: 이 유틸리티는 다음을 사용하여 요소의 존재를 확인합니다. ID는 "atfResults"입니다. 발견되면 addCustomSearchResult() 함수를 실행합니다.
• addCustomSearchResult() 함수: 이 함수는 사용자 정의 콘텐츠를 삽입하여 Amazon 검색 결과를 수정합니다. 이 예에서는 "대신 내 물건을 구매하세요!"라는 텍스트가 포함된 맞춤 div를 추가합니다. 각 결과 행의 시작 부분에.

이제 이 솔루션을 사용하면 새로 고침 없이 동일한 페이지에서 Greasemonkey 스크립트를 여러 번 실행할 수 있으므로 브라우저 상호 작용에 대한 유연성과 제어력이 향상됩니다.