자바스크립트를 사용하여 브라우저 애드온을 만드는 방법. 우리는 Chrome용 첫 번째 확장 프로그램을 작성 중입니다. 확장을 패키징하는 방법 및 배치 위치

Chrome 웹 스토어의 모든 항목은 애플리케이션과 확장 프로그램으로 구분됩니다. 우리는 둘 다 할 것입니다. 우리가 만든 애플리케이션은 새 브라우저 탭에 아이콘으로 표시되며 이를 통해 사이트를 빠르게 시작할 수 있습니다. 확장 기능은 도구 모음에 있는 특수 버튼으로, 클릭하면 최신 사이트 업데이트가 포함된 패널이 나타납니다.

Google Chrome용 애플리케이션 구축

1. 이 링크에서 확장 템플릿이 포함된 아카이브를 다운로드하세요.

2. 편리한 곳에 압축을 푼다. 안에 파일이 있어요 매니페스트.json및 아이콘 icon.png.

3. 파일 열기 매니페스트.json메모장에서 내용을 편집하세요. 2행에는 사이트 이름, 3행에는 설명(최대 132자), 5행과 7행에는 사이트 주소를 입력해야 합니다. 변경 사항을 저장합니다.

4. 아카이브의 아이콘을 PNG 형식(크기 128*128)의 이미지로 변경합니다.

Google Chrome용 확장 프로그램 구축

확장은 기능적으로 애플리케이션과 크게 다르지만 어셈블리 알고리즘은 그다지 복잡하지 않습니다.

1. 이 링크에서 확장 템플릿을 가져옵니다.

2. 압축을 푼다. 메모장에서 매니페스트.json 파일을 열고 사이트 이름, 간략한 설명, 확장 창 제목(2, 3, 8행)을 붙여넣습니다.

3. 파일 열기 labnol.js귀하 사이트의 RSS 피드 주소를 표시하십시오.

4. 아카이브의 아이콘을 PNG 형식(크기 128*128)의 이미지로 바꿉니다.

출판

우리가 만든 확장 프로그램과 애플리케이션은 두 가지 방법으로 사용할 수 있습니다. 귀하가 웹사이트의 소유자이고 추가 사용자를 웹사이트로 끌어들이고 싶다면 Chrome 웹 스토어에 귀하의 작업을 게시할 수 있습니다. 이렇게 하려면 확장 프로그램과 추가 기능 파일을 자체 아카이브에 압축하고 Chrome 대시보드 페이지로 이동하여 작업을 Google 스토어에 업로드하세요. 여기에서는 스크린샷을 업로드하고, 자세한 설명을 제공하고, 기타 매개변수를 지정하라는 메시지가 표시됩니다. 이 페이지는 러시아어로 되어 있으므로 쉽게 이해할 수 있습니다. 확장 프로그램을 게시하려면 해당 확장 프로그램을 만든 사이트의 확인된 소유자여야 합니다. 또한 출판물 당 $5의 참가비를 입력해야 합니다.

예를 들어 즐겨찾는 사이트의 업데이트를 편리하게 모니터링하기 위해 개인적인 용도로만 확장 프로그램을 수집한 경우 브라우저에서 확장 프로그램 페이지를 열고 개발자 모드를 활성화하기만 하면 됩니다. 그런 다음 버튼을 클릭하세요. 압축이 풀린 확장 프로그램 다운로드파일이 있는 폴더의 경로를 지정합니다.

제안된 방법을 사용하면 웹사이트나 블로그 소유자라면 누구나 자신의 리소스에 대한 브랜드 확장 프로그램을 만들고 Google Chrome 브라우저 확장 프로그램 디렉토리에 배치할 수 있습니다. 이를 통해 방문자는 최신 업데이트를 최신 상태로 유지하여 사이트에 더 많은 방문자를 유치하고 인기를 높일 수 있습니다.

나는 항상 모든 사람이 사용할 수 있지만 어떤 이유로 모든 사람이 사용할 수 없는 흥미로운 기회(기술)에 대해 사람들에게 알리고 싶었습니다. 예, 그것은 동어반복으로 판명되었지만 이 뜨거운 주제에 대한 내 내면의 분노를 완전히 반영합니다. 그렇더라도 지금의 대화는 그들이 말하는 방식에 관한 것이 아닙니다. 오늘은 Google Chrome 브라우저(이하 Chrome)용 확장 프로그램을 만드는 방법에 대해 이야기하겠습니다.

이 기사 전반에 걸쳐 개발할 확장 프로그램은 Google Chrome 웹 스토어에서 찾을 수 있으며 유일한 차이점은 고급 기능이 있다는 것입니다. 또한 GitHub에는 소스 코드가 있습니다. 모든 내용은 CoffeeScript로 작성되었으며 여기에서는 JavaScript로 스토리가 작성된다는 주의 사항이 있습니다. 그건 그렇고, 나는 CoffeeScript의 팬이나 지지자는 아니지만 꽤 흥미롭고 유용한 것입니다. 시도해 보시기 바랍니다.

Chrome, Firefox, Maxthon 및 기타 브라우저용 확장 프로그램을 만드는 아이디어를 고려해 본 적이 있다면 아마도 최소한의 노력이 Chrome에 필요하다는 것을 이미 알아차렸을 것입니다. 해당 브라우저에 대한 설명서를 보면 이를 확인할 수 있습니다.

문제의 공식화

확장 기능 작성은 설명과 해결될 작업 설정으로 시작됩니다. 나는 내 상사이고 원하는 만큼 마감일을 놓칠 수 있으므로 기술 사양을 작성할 필요가 없습니다. 다음 사항을 이해하는 것으로 충분합니다.

확장 프로그램은 VK 소셜 네트워크의 모든 댓글을 숨겨야 합니다.
확장 프로그램은 주석을 표시할 수 있어야 합니다.
확장 프로그램은 특정 페이지에 댓글을 표시할 수 있어야 합니다.

언뜻 보면 모든 것이 간단하고 할 수 있습니다. 그러나 기사의 틀 내에서 처음 두 가지 사항만 구현할 것입니다.

나는 다음과 같은 내용의 질문을 예상합니다. "이게 소셜 네트워크의 핵심이라면 왜 댓글을 숨기나요?!" 글쎄요, 자세한 답변이 필요한 공정한 질문입니다.

최근 VK 댓글을 보면 해설자들에게 얼굴 손바닥을 산더미같이 주고 싶은 상황이 됐다. 저는 다양한 공개 페이지, 주제별(웹 개발)을 구독하고 있지만 그렇게 많지는 않습니다. 그리고 아무리 이상하게 보일지라도 나는 고양이(내 경우에는 팬더)가 아닌 나에게 흥미로운 콘텐츠가 있는 그룹에서 가장 관대해집니다. 댓글에 이렇게 비전문적이고 추악한 정보가 흘러다니는 것을 다른 곳에서는 본 적이 없으며 심지어 논쟁을 벌일 생각까지 합니다. 게다가 뉴스피드의 댓글도 미학적으로 보기에 좋지 않습니다. 일반적으로 말하고 완료했습니다.

확장 프레임

저에게 가장 기분 좋은 놀라움은 여행이 시작될 때 행동의 설명적인 성격으로 우리를 맞이한다는 것입니다. 간단히 말해서, 애플리케이션, 애플리케이션의 권리 및 기능을 설명해야 합니다. 이를 위해 매니페스트.json 파일이 사용됩니다.

먼저, 다음 세 가지 필수 항목을 작성해야 합니다.

( "manifest_version": 2, // Chrome 18 세트 2부터 시작, 그렇지 않으면 1(이러한 이전 항목은 지원되지 않음) "name": "My Extension", // 확장 이름 "version": "versionString" // 확장 버전 )

이름으로 모든 것이 명확하고 매니페스트 버전이 훨씬 더 단순하다면 확장 버전을 자세히 살펴봐야 합니다.

따라서 우리는 어떤 버전이 점으로 구분된 세 개의 숫자, 즉 Major.Minor.Patch(의미 숫자)로 구성된다는 사실에 익숙합니다. npm, bower 및 기타 즐거움을 사용하면 대화가 짧습니다. 이런 식이든 아니든 상관없습니다. 하지만 Google은 다음과 같은 옵션을 제공합니다.

"버전": "1" "버전": "1.0" "버전": "2.10.2" "버전": "3.1.2.4567"

설명서에서 매니페스트 파일의 모든 필드에 대해 자세히 알아볼 수 있습니다.

우리의 경우 매니페스트 파일은 다음과 같습니다.

( "manifest_version": 2, "name": "__MSG_app_name__", "short_name": "VKCommentBlocker", "description": "__MSG_app_description__", "version": "0.1.0", "default_locale": "ru", " 허가": [ "activeTab" ], "browser_action": ( "default_icon": "icon_16.png", "default_title": "__MSG_browser_action__" ), "icons": ( "16": "icon_16.png", "48 ": "icon_48.png", "128": "icon_128.png" ), "배경": ( "지속적": false, "page": "Background.html" ), "content_scripts": [ ( "일치" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "styles /commentblocker_on.css" ] )

지금까지 고려하지 않았던 것부터

__MSG_key__는 Chrome의 애플리케이션 국제화(i18n)입니다. 매니페스트 파일과 다른 파일(CSS 포함) 모두에서 사용할 수 있습니다.
web_accessible_resources - 나중에 웹 페이지의 컨텍스트에서 사용될 리소스 경로의 배열입니다. 경로를 지정하지 않으면 그러한 동작이 예상되는 경우 웹 사이트 페이지에서 아무것도 사용할 수 없습니다.

확장 리소스

Chrome 카르마의 큰 장점은 이제 매니페스트.json에 지정된 모든 리소스가 생성된 경우 확장 기능을 활성화할 수 있다는 것입니다.

나는 commentblocker.css와 commentblocker_on.css 파일에 있는 내용에 집중할 가치가 없다고 생각합니다. 주석이 포함된 모든 선택기를 나열하는 첫 번째 항목만 제공하겠습니다.

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link ( 표시: 숨김 !important; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pv_comments, #pv_comments_header, #pv_your_comment ( 표시: 없음 !import ant; 표시: 숨겨진 ! 중요; ) 본문: 이후( 위치: 고정; 내용: "__MSG_mode_enable__"; 위쪽: 5px; 오른쪽: 5px; 패딩: 6px 12px; 배경색: #ffc; 테두리: 1px 단색 #ddd; z-색인: 9999 ; )

commentblocker_on.css 파일에서는 짐작할 수 있듯이 그 반대가 사실입니다. CSS에서 바로 언어 핵심 내용이 포함된 줄을 사용하고 있습니다: "__MSG_mode_enable__" . 이제 이러한 키를 저장할 파일을 만들 차례입니다.

확장 프로그램의 루트에 _locales 디렉터리와 그 안에 중첩된 en 및 ru 디렉터리를 만듭니다. 다음으로 message.json 파일의 키를 설명합니다.

( "app_name": ( "message": "VK 댓글 차단기" ), "app_description": ( "message": "뉴스피드와 그룹에서 댓글을 숨기는 편리한 방법입니다." ), "browser_action": ( "message ": " 댓글 유형 전환" ), "mode_enable": ( "message": "댓글 없음!" ), "mode_disable": ( "message": "댓글 포함!" ) )

메시지 필드 외에도 설명서에서 배울 수 있는 다른 필드가 있습니다.

이제 먼저 다음과 같이 background.html 파일을 만듭니다.

배경

여기의 모든 내용은 일반 HTML과 동일합니다. 특이한 점은 없습니다. 그런데 background.html 파일은 Manifest.json의 필드를 기반으로 자동으로 생성되므로 별도로 생성할 필요가 없습니다.

확장 프로그램 실행

JavaScript를 한 줄도 작성하지 않고도 확장 프로그램을 실행할 수 있습니다. 이렇게 하려면 메뉴를 거쳐야 합니다.

Google Chrome(햄버거) 설정 및 관리
추가 도구
확장
'개발자 모드' 옆의 확인란을 선택하세요.
압축이 풀린 확장 프로그램 다운로드
확장자가 있는 폴더 선택

확장 프로그램이 로드되어 메뉴에 표시되었습니다. 네, 네, 이게 'B'예요.

방금 만든 확장 프로그램에는 머리 속에 아무것도 없는 것 같고(논리가 없음) 문자 "B"가 있는 소셜 네트워크 페이지의 모든 댓글이 이제 숨겨져 있습니다. 대답은 매니페스트.json에 있습니다. 여기서 "content_scripts": () 필드에 commentblocker.css 파일이 어떤 페이지(http://vk.com/* 및 https://vk.com/*)에 표시되는지 표시했습니다. 자동으로 포함되어 모든 댓글이 숨겨집니다. 수학 패턴에 대해 더 자세히 읽어 보시기 바랍니다. 겉보기에는 매우 단순하지만 후드 아래에는 모든 종소리와 휘파람 소리가 포함된 거의 회색 겔딩이 있습니다.

따라서 한 줄의 코드도 작성하지 않고도 할당된 주요 작업을 수행하는 확장이 이미 있습니다.

확장팩 부활

작업의 두 번째 지점, 즉 주석 표시 기능을 구현하는 것이 남아 있습니다. 즉, commentblocker.css 파일의 규칙을 재정의하는 commentblocker_on.css 파일을 푸시해야 합니다. 그리고 여기에서 우리의 전능한 JavaScript가 우리를 돕기 위해 달려갑니다.

내가 background.html에 대해 말한 것을 기억하시나요? 예, 예, 만들 필요가 없다는 사실입니다. 매니페스트.json을 약간 변경해 보겠습니다.

... "배경": ( "지속적": false, "scripts": [ "scripts/commentblocker.js" ] ), ...

방금 JavaScript 파일을 연결했습니다. 특별한 것은 없습니다. 이 파일로 가보겠습니다.

JS를 페이지에 넣을 수는 없습니다. 그리고 같은 문제는 스크립트에만 존재하는 것이 아닙니다. 따라서 특수한 ExecuteScript 주입을 사용해야 합니다.

먼저 확장 아이콘에 클릭 이벤트 핸들러를 추가해야 합니다.

Chrome.browserAction.onClicked.addListener(function(tab) ( chrome.tabs.executeScript(tab.id, ( 코드: "(" +ggleComments.toString() + ")();" )); ));

여기서ggleComments는 CSS 파일을 페이지에 삽입하는 함수입니다.

VarggleComments = function() ( var ExtensionLink; (document.getElementById("extension") == null) ? (extensionLink = document.createElement("link"), ExtensionLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css"), ExtensionLink.id = "extension", ExtensionLink.type = "text/css", ExtensionLink.rel = "stylesheet", document.getElementsByTagName("head").appendChild(extensionLink)) : (document. getElementsByTagName("head").removeChild(document.getElementById("extension"))) );

이 코드 조각이 CSS가 페이지에 연결되어 있는지 확인하고 이를 활성화 또는 비활성화해야 하는지에 대한 결론을 내리는 단어로 충분하다고 생각합니다.

그런데 다양한 요구 사항을 충족할 수 있는 이벤트가 많지 않습니다. 예를 들어 다음과 같은 이벤트가 있습니다.

onCreated - 탭을 생성합니다.
onUpdated - 탭을 업데이트합니다.
onRemoved - 탭을 닫습니다.

onUpdated 이벤트가 두 번 호출된다는 점은 주목할 가치가 있습니다.

페이지 업데이트;

StackOverflow에서는 페이지 상태를 확인하는 것이 좋습니다.

Chrome.tabs.onUpdated.addListener(function(tabId,changeInfo, tab) ( if (changeInfo &&changeInfo.status === "complete") ( ... ) ));

이제 아이콘을 클릭하면 댓글을 표시하는 스타일 파일이 연결되며, 아이콘을 다시 클릭하면 해당 댓글이 다시 숨겨집니다.

결론

그건 그렇고, 다음에서 사용할 수 있는 VK Comment Blocker 확장의 전체 버전을 언급할 가치가 있습니다.

이 분야에서 가장 권위 있는 사람들은 Wladimir Palant(그가 AdBlock Plus를 작성함)입니다. ... Chrome용 확장 프로그램은 Firefox보다 작성하기가 더 쉽습니다. 흥미롭게도 Chrome에서 가장 인기 있는 확장 프로그램은 "Tyuryaga VKontakte"입니다(Yandex 통계에 따르면).

문제는 브라우저에서 열리는 특정 HTML 페이지에 응답하는 확장 기능을 개발하는 것입니다. 예를 들어, 사이트 페이지의 HTML 코드를 수정하여 이 사이트를 보다 편리하게 사용할 수 있습니다.
이 솔루션은 Google Chrome 24.x 및 Chromium 6.x(Debian 6.0.6, amd64)에서 테스트되었습니다.

문제의 해결

crx 확장 프로그램을 작성하는 동안 발생하는 주요 질문 요약입니다.

확장 프로그램을 등록하는 방법은 무엇입니까?

타이머는 어떻게 설정하나요?

확장 프로그램을 등록하는 방법은 무엇입니까?

최소 확장을 위해서는 4개의 파일이면 충분합니다:

128.png background.js content.js 매니페스트.json

매니페스트.json은 어디에 있나요?

( "manifest_version": 2, "name": "DomainCheck 확장", "version": "0.1", "Background": ( "scripts": ["Background.js"]), "content_scripts": [ ( "일치 ": [ "*://*/*" ], "js": [ "content..png" ) // web_accessible_resources 없음 )

background.js 파일에는 브라우저가 시작될 때 실행되는 코드가 포함되어 있습니다. 이 스크립트에서는 문서 콘텐츠 로딩 핸들러(document.location.href)를 "중지"할 수 있습니다.

Chrome 자체에서는 _generated_Background_page.html을 생성합니다.

background.js와 콘텐츠 스크립트 간에 통신하려면 메시지(요청/메시지)와 chrome.extension.getBackgroundPage()를 사용할 수 있습니다. Chrome 확장 프로그램의 아키텍처 개요도 참조하세요. "콘텐츠 스크립트는 "브라우저에 로드된 페이지의 컨텍스트에서 실행되는 일부 JavaScript"입니다.

참고: Chromium에서는 해당하는 배경 페이지(Background.js)가 없기 때문에 디버그하기가 어렵습니다. 개발자 모드의 '확장' 페이지에 있는 탭입니다.

현재 URL을 확인하고 잘라내어 해시를 계산하는 방법은 무엇입니까?

DOMContentLoaded에 핸들러를 설치하는 방법은 개발자.chrome.com에 설명되어 있습니다. 배경 페이지(Background.js)에 대한 문서도 참조하세요.

HTML 코드를 페이지에 삽입하려면 Habré 기사의 조언을 사용할 수 있지만(전역 변수 문서에 대한 언급은 참조) 현재 URL을 목록과 비교해야 합니다.

document.location.href는 더 이상 사용되지 않습니까?

정규화된 도메인 이름을 얻는 stackoverflow.com의 예:

var url = "http://www.domain.ru/tmp/file.txt?abc=1&cde=2#123" var getLocation = function(href) ( var l = document.createElement("a"); l. href = href; return l; ); var l = getLocation(url); 경고(l.호스트 이름)

다음과 같이 2차 수준 하위 도메인을 선택할 수 있습니다.

var l = getLocation(url); var d = l.호스트 이름; 함수 cutd(str) ( var re = /.*?\.([\w\d-\u0100-\uffff-\.]+\.[\w\d-\u0100-\uffff-\.]+ )/; return str.replace(re,"$1"); ) Alert(cutd(d));

(stackoverflow.com의 팁 참조)

sha1.js 주입 ...

타이머는 어떻게 설정하나요? 샘플 확장: 이벤트 페이지 예, background.js를 참조하세요.

chrome.alarms.create((delayInMinutes: 0.1)); chrome.alarms.onAlarm.addListener(function() ( Alert("시간이 다 됐어요!"); ));

Chromium의 이 버그는 2013년 1월 9일에 해결되었지만 Windows용 최신 빌드에는 아직 나타나지 않았습니다.

여전히 "최신" 알람을 사용하기로 결정했다면 stackoverflow.com에 임의의 기간/기간의 알람 타이머를 올바르게 설정하는 방법이 설명되어 있습니다.

이전 브라우저와의 호환성을 위해 background.js에서 window.setInterval()을 사용하는 것이 좋습니다.

var 나는 = 0; window.setInterval(function() (alert(i); i++), 2*1000); // 밀리초 단위

setTimeout() 함수는 단일 "알람 시계"입니다.

비활성화-활성화 크롬 확장 프로그램은 background.js를 새로운 방식으로 시작합니다. *) 모드에 들어가려면 같은 사항을 확인해야 하나요? 그리고 잠.

config.xml/time.txt를 다운로드하는 방법과 이를 구문 분석하는 방법은 무엇입니까?

단순히 XMLHttpRequest를 통해 다운로드하는 경우 "XMLHttpRequest가 http://site/config.xml을 로드할 수 없습니다. Origin http://www.google.ru는 Access-Control-Allow-Origin에서 허용되지 않습니다."라는 메시지가 표시될 수 있습니다. ". 이는 도메인 간 요청을 할 때 CORS, .htaccess에 대한 옵션을 활성화하지 않았음을 의미합니다.

헤더 세트 Access-Control-Allow-Origin "*"

Chrome 확장 프로그램과 매니페스트.json의 권한을 통해 도메인 간 요청을 허용할 수 있습니다.

( "manifest_version": 2, ... "permissions": [ "http://site/" ],

그러나 이 두 가지 경우 모두 압축이 풀린 Chromium 확장 프로그램에서는 작동하지 않습니다. 패키지 확장 프로그램의 경우 Chromium 버전 6.0-7.0에서 "Bad Magic Number"가 표시되는 경우가 있습니다(순수한 Chrome에서는 이 오류가 관찰되지 않습니다).
참고: Chromium에서는 --disable-web-security 옵션을 통해 CORS 보호를 우회할 수 있습니다.

$ 크롬 브라우저 --disable-web-security http://도메인/경로

추가: Chromium의 경우 매니페스트.json의 행을 다음과 같이 변경해야 합니다(도메인을 명시적으로 지정하고 경로에 별표를 추가함).

( "권한": [ "http://site/*" ],

인터넷이 꺼졌을 때 크롬의 웹 검사기(?)가 XMLHttpRequest()에 대해 불평하는 것을 방지하려면 다음을 수행할 수 있습니다.

var 요청 = null; try ( req = new XMLHttpRequest(); ) catch(err) () // stackoverflow.com에서 조언을 참조하세요.

(이 내용은 stackoverflow.com의 조언에 따라 작성되었습니다.) ...

구문 분석을 디버깅하려면 console.log("line")을 사용할 수 있습니다. 문자열은 "\n"을 사용하여 캐리지 리턴을 허용합니다.

Chrome 확장 프로그램에서 XML을 JavaScript로 구문 분석하는 작업은 다음과 같이 수행됩니다.

var xml = req.responseXML.documentElement; var ts = xml.getElementsByTagName("timeout"); var 시간 초과 = ts.textContent; if (ts) (console.log("timeout="+timeout);) var ds = xml.getElementsByTagName("domain"); if (ds) ( for (var i = 0; i< ds.length; i++) { console.log("domain: "+ds[i].textContent); } }

크롬 확장에서 전역 원자 변수와 테이블 데이터를 사용하는 방법은 무엇입니까?

Storage API를 사용하여 확장 데이터를 동기화하려면 Chrome 버전 >= 20이 필요합니다. 매니페스트(manifest.json)에서 다음을 작성해야 합니다.

"premissions": ["저장소" ]

그들은 Google 그룹 "Chromium HTML5"에 "웹 SQL 데이터베이스에 관심을 돌렸지만 웹 SQL이 더 이상 "활성 유지 관리" 상태가 아닌 것 같아서 HTML 사양에서 삭제될 것이라고 믿게 되었습니다."라고 썼습니다. 자세한 내용은 W3C 웹 SQL 데이터베이스, 참고를 참조하세요. 기본 개념을 사용해 볼 수 있습니다. 데이터베이스 공간을 확장하려면 매니페스트.json에서 unlimitedStorage 권한을 사용할 수 있습니다. "무제한 저장소"를 사용하려면 다음과 같은 오프라인 API가 있습니다. 1) 앱 캐시; 2) 파일 시스템; 3) 인덱스DB; 4) WebSQL(더 이상 사용되지 않음). Chrome에서 IndexedDB를 사용하는 예는 다음을 참조하세요. IndexedDB 작업의 예는 gist.github.com을 참조하세요.

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("my db") req.onerror = function() ( console.log("error"); )

IndexedDB 파일 위치,
Windows: C:\Users\\AppData\Local\Google\Chrome\User Data\Default\IndexedDB,
리눅스: /home//.config/google-chrome/Default/IndexedDB/chrome-xxx.indexeddb.leveldb/:

$ sudo ls -la /home/anonymous/.config/google-chrome/Default/IndexedDB/chrome-extension_ojeihbjghbabiocoglbfhdebhhckdnol_0.indexeddb.leveldb/ 총 24 drwx------ 2 익명 익명 4096 2월 7일 03:08 . drwx------ 3 익명 익명 4096 2월 7일 03:08 .. -rw-r--r-- 1 익명 익명 285 2월 7일 03:08 000003.log -rw-r--r-- 1 익명 익명 16 2월 7일 03:08 CURRENT -rw------- 1 익명 익명 0 2월 7일 03:08 LOCK -rw-r--r-- 1 익명 익명 46 2월 7일 03:08 LOG -rw-r --r-- 1 익명 익명 32 2월 7일 03:08 MANIFEST-000002

Mozilla 개발자 네트워크에서 IndexedDB 사용 예를 볼 수 있습니다.

IndexedDB에 많은 수의 레코드를 삽입하는 방법은 stackoverflow.com에서 다룹니다.

IndexedDB에 항목을 추가하려면 다음을 사용해야 합니다.

indexedDB.db.transaction().objectStore().put())

IndexedDB 데이터베이스 폴더에는 기존 데이터베이스가 .sst 파일로 저장되고, 새(현재) 데이터베이스는 .log 파일로 저장됩니다.

setVersion()은 더 이상 사용되지 않습니다. 하지만 여기에는 [onupgradeneeded()에 대한] 한 가지 트릭이 있습니다. ...

Parashuram Narasimhan의 블로그에 명시된 대로 "Chrome의 경우: Chrome의 경우 onupgradeneeded 함수가 호출되지 않습니다. 데이터베이스의 onsuccess 함수가 호출됩니다. 여기서는 setVersion 메소드의 존재 여부를 확인합니다. 메소드가 존재하고 지정된 버전이 데이터베이스 버전보다 높은 경우 setVersion 메소드가 호출됩니다. setVersion" 요청 호출의 onsuccess는 버전 트랜잭션과 함께 사용자의 onupgradeneeded 메소드를 호출합니다. 메서드가 완료되면 데이터베이스를 닫아 versionTransaction이 커밋됩니다. 데이터베이스는 최신 버전으로 다시 열리고 이는 사용자가 정의한 onsuccess에 전달됩니다." (따라서 onupgradeneeded()를 호출하려면 db.setVersion("3")을 수행합니다).

content.js에서 데이터를 가져오는 방법:

dbreq.onupgradeneeded = function(event) ( console.log("dbreq.onupgradeneeded"); var db = event.target.result; var tx = db.transaction(["test_db"], "readonly"); var store = tx.objectStore("todo");

데이터베이스를 열려면 axemclion+jepp(openReqShim 함수)의 코드를 사용하세요.

존재하지 않는 IndexedDB 데이터베이스를 열면 버전 번호인 version = 0으로 생성됩니다. 이 경우 onupgradeneeded() 및 onsuccess()가 순차적으로 호출됩니다. 처음 onupgradeneeded()를 호출하면 버전은 이미 = 1입니다. [기존 데이터베이스]를 두 번째로 열면 onupgradeneeded()는 더 이상 호출되지 않으며 버전 번호 = 1입니다. (?는 증가하지 않음) dbreq만 .onsuccess()가 호출됩니다.

하나 더. "23 이전의 Chrome에서는 사양에서 제거된 API인 setVersion()을 호출하여 이러한 트랜잭션을 수동으로 생성해야 합니다. 이전 사양은 http://www.w3.org에서 찾을 수 있습니다. /TR/2011/WD-IndexedDB-20110419/", 즉 Chrome 로그에서 "NotFoundError: DOM IDBDatabase Exception 8" 오류를 방지하려면 setVersion()을 호출해야 합니다.

Chromium 6.0.472.63(59945)에서는 IndexedDB 구현이 안정적이지 않아 비활성화되어 작동하지 않습니다 =)

일반적으로 메시지를 통해 background.js + iframe + 콘텐츠 스크립트 교환을 사용해야 합니다.

페이지 열기 이벤트를 어떻게 처리하나요?

"content_scripts": [ ( "일치": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_start" ) ], ...

콘텐츠.js:

document.addEventListener("DOMContentLoaded", function () ( Alert("Abc "+document.location.href); ));

페이지의 HTML 코드 형식을 지정하는 방법은 무엇입니까? Firefox 확장 기능 작성을 참조하세요. 확장을 패키징하는 방법과 배치할 위치는 무엇입니까?

Chrome 웹 스토어에 확장 프로그램을 설치하려면 Google에 5달러의 입장료를 지불해야 합니다. 그런 다음 확장 프로그램을 원하는 만큼 배치할 수 있습니다. VISA, MasterCard, AMEX 또는 DISCOVER를 통해 결제할 수 있습니다(결제 시 전체 우편 주소와 성과 이름을 표시해야 합니다).

확장 프로그램을 설치하려면 Google 계정 등이 필요합니다. 스크린샷과 광고 이미지가 필요합니다. 동일한 Chrome WebStore를 통해 확장 코드를 수동으로 업데이트해야 합니다(제가 이해한 바에 따르면 Firefox에서는 URL을 통한 자동 업데이트가 없습니다). 매니페스트.json 파일에서 확장 버전을 업데이트해야 합니다. 추가하고 몇 분 후에 Chrome 확장 프로그램 검색에서 확장 프로그램을 사용할 수 있습니다.

Linux용 확장 패키징:

#!/bin/bash 7z a -tzip ../domainck-chromium.zip ./* mv ../domainck-chromium.zip ../domainck-chromium.crx

키워드: Windows용 Chromium 빌드 HOWTO, 구글 크롬 다운로드 페이지, Google Chrome 샘플 확장 프로그램.

인터넷에는 마우스나 스크롤 막대를 사용하지 않고도 페이지를 위로 스크롤할 수 있는 기능을 제공하는 사이트가 많이 있습니다. 그러나 동시에 그러한 구현이 없는 사이트도 있습니다. "모든 사이트에 그러한 버튼을 추가하는 스크립트를 작성해 보는 것은 어떨까요?" - 생각하고 실행에 옮겼어요. 이러한 스크립트를 사용자 스크립트라고 하며 확장자는 *.user.js입니다. 예를 들어 Habré에서 읽을 수 있습니다. 불행히도 함정 없이는 할 수 없습니다. 브라우저마다 userjs 구현에 약간의 차이가 있습니다. Google Chrome 브라우저의 확장 기능으로 userjs 스크립트를 구현하는 방법을 중점적으로 설명하겠습니다.

매니페스트.json

Google Chrome 확장 프로그램에 필요한 파일은 다음과 같습니다. 매니페스트.json매개변수, 외부 파일 경로(*.js, *.css 등), 버전 지원 등에 대해 설명합니다. 확장을 위해. 파일에 대한 자세한 내용을 읽을 수 있습니다. 우리의 경우 매니페스트.json 파일은 다음과 같습니다.

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "일치": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": true, "description": "google chrome용 백톱 사용자 스크립트 확장", "name": "backTopUserJS", "version": "1" )

편의를 위해 우리는 매니페스트.json 파일과 메인 스크립트 파일(이 경우 backTopUserJS.user.js) 옆에 배치한 JQuery 라이브러리를 사용합니다. 그 내용은 다음과 같습니다.

// ==UserScript== // @name backTopUserJS // @author Aleksandr Filatov // @license MIT // @version 1.0 // ==/UserScript== function main() ( var disp = $(window).scrollTop () > 400 ? "블록": "없음"; var $upButton = $("

"); $(document).find("body").append($upButton); $upButton.click(function () ( $("html, body").animate(( scrollTop: 0 ), "slow" ); )); $(window).scroll(function () ( if ($(window).scrollTop() > 400) $upButton.fadeIn("slow"); else $upButton.fadeOut("slow"); )); ); var script = document.createElement("script"); script.appendChild(document.createTextNode("("+ main +"))();")); (document.body || document.head | | document.documentElement).appendChild(script);

스크립트는 세부적으로 고려할 만큼 명확하다고 생각합니다. 마지막 3줄만 설명할 가치가 있습니다. 실제로 이는 사이트 페이지 코드에 스크립트를 삽입하는 작은 해킹입니다. 더 나은 방법을 찾으신 분은 댓글에 수정사항을 적어주세요 :)

브라우저에 확장 프로그램 설치

다른 브라우저와 마찬가지로 Google Chrome에도 맞춤 스크립트를 설치할 수 있지만 Google은 보안을 중요하게 여기기 때문에 브라우저 확장 프로그램으로 묶어야 합니다. 설치 과정을 단계별로 살펴보겠습니다.

C:\MyChromeExtensionUserJS와 같이 확장 기능을 위한 폴더를 만듭니다.

각 확장에 대해 자체 디렉토리를 만듭니다. 예를 들어 우리의 경우 C:\MyChromeExtensionUserJS\backTopUserJS라고 합니다. 이 디렉터리에 확장 파일을 추가합니다.

"Google Chrome 브라우저 정보" -> "확장 프로그램" 탭으로 이동하거나 주소 표시줄에 chrome://extensions/를 입력하세요.

"개발자 모드" 확인란을 선택하세요.

"압축해제된 확장 로드" 버튼을 클릭하고 확장의 디렉터리를 선택하세요. "확인"을 클릭하세요.

확장이 설치되었으며 사용할 준비가 되었습니다. 확장 프로그램을 변경한 후 업데이트하려면 "확장 프로그램 업데이트" 버튼을 클릭하거나 개발자 모드에서 키보드 단축키 Ctrl+R을 누르세요.

결론

github에서 스크립트 소스를 보실 수 있습니다. 이 스크립트는 이상적이라고 주장하지 않지만 Google Chrome용 사용자 정의 스크립트를 작성하기 위한 예와 자극제 역할만 합니다.