구글 크롬 앱. 간단한 Chrome 애플리케이션 만들기 Google 크롬 확장 프로그램
Google 크롬은 이제 Android에 설치할 수 있는 세계에서 가장 인기 있는 인터넷 브라우저입니다. 프로그램의 모바일 버전은 데스크톱 버전만큼 빠르고 기능적입니다.
Google 크롬 브라우저의 기능
브라우저에는 사용자가 Google에서 제품을 선택하는 데 도움이 되는 다양한 주요 기능이 있습니다. 여기에는 다음이 포함됩니다.
- 탭 작업이 최적화되어 로딩 속도가 3배 빨라졌습니다.
- 단 몇 번의 클릭만으로 다양한 Android 기기 간에 개인 정보(탭, 북마크, 비밀번호)를 동기화할 수 있습니다.
- 수신 및 전송되는 데이터의 양을 2배로 줄일 수 있는 고유한 트래픽 압축 기능입니다. 이 기능은 모바일 트래픽을 사용하여 인터넷에 액세스하는 사람들에게 특히 유용합니다.
- 검색어 입력과 동시에 가능한 검색 옵션을 제공하는 스마트 검색입니다.
- 자동 번역 기능이 내장되어 있어 더 이상 언어 장벽이 없습니다.
- Google Chrome 브라우저 탭 작업을 편리하게 구현하여 작업을 즐겁게 만듭니다.
- 기밀 서핑의 가용성. 이 기능을 활성화하면 누구도 인터넷에서 귀하의 움직임을 추적할 수 없습니다.
최신 업데이트를 통해 Google Chrome은 더욱 안정적이고 안정적으로 작동하며 모바일 장치 화면의 시각적 표시도 향상되었습니다. 이는 의심할 여지 없이 이 프로그램이 설치된 장치의 모든 사용자가 높이 평가할 것입니다.
Google Play 앱 스토어가 있습니다. 스토어라고는 하지만 대부분의 애플리케이션이 무료로 배포됩니다. 이동하려면 브라우저 오른쪽 상단에 있는 버튼을 클릭하세요. 그런 다음 마우스 커서를 "도구" 위로 이동하고 나타나는 하위 메뉴에서 "확장"을 선택합니다. 또는 주소 표시줄에 'chrome://extensions/'를 입력할 수도 있습니다.
우리는 기존 애플리케이션이 있는 페이지에 있습니다. 제 경우에는 'Google 문서 0.7'이라는 확장 프로그램이 이미 설치되어 있습니다. "추가 확장" 줄을 선택합니다.
왼쪽에는 애플리케이션 테마를 선택하기 위한 메뉴가 있으며 기본적으로 "확장" 섹션이 선택되어 있습니다. 마우스 휠을 사용하여 아래로 스크롤하는 것이 편리합니다. 오른쪽에는 인기도에 따른 애플리케이션 자체가 있습니다.
응용 프로그램 위로 마우스를 가져가면 응용 프로그램 로고가 응용 프로그램 작업에 대한 간략한 설명(또는 응용 프로그램 공지)으로 변경됩니다. 비용을 나타내는 파란색 설치 버튼이 나타납니다.
애플리케이션 위로 마우스 커서를 이동하면 로고가 설명 및 다운로드 버튼으로 변경됩니다. "무료" 버튼을 클릭하세요.
응용 프로그램 설치를 확인하고 "추가"버튼을 클릭합니다.
새로운 버튼과 설치 알림 창이 나타납니다. 하지만 이 아이콘은 사라지게 됩니다.
확장 프로그램으로 다시 이동하여 "설정", "도구" 및 "확장" 버튼을 누르세요.
이제 응용 프로그램에 "고급 설정"이 설치된 것으로 나타납니다. 애플리케이션 작동에 익숙해지려면 애플리케이션 아래에 있는 활성 "설정" 링크를 클릭하십시오.
새 창에 추가 설정이 나타납니다. 프로그램 작동을 확인해 보겠습니다. '좋아요' 버튼을 다른 것으로 변경한 후 '저장' 버튼을 클릭합니다.
이제 열어보자
개발 중인 애플리케이션을 테스트하려면 해당 애플리케이션을 브라우저에 추가해야 합니다. 이렇게 하려면 chrome://extensions 페이지에서 '개발자 모드' 확인란을 선택해야 합니다. 그 후에는 확장 프로그램이나 애플리케이션을 추가할 수 있습니다.매니페스트.json
확장 프로그램과 마찬가지로 Chrome 애플리케이션의 코드는 매니페스트.json 파일로 시작됩니다. 애플리케이션의 모든 메타 정보를 설명합니다. 편집자의 선언문 전체는 다음과 같습니다.( "name": "간단한 텍스트", "description": "매우 간단한 텍스트 편집기(샘플 Chrome 앱)", "version": "0.1", "icons": ( "48": "icon/48.png ", "128": "icon/128.png" ), "manifest_version": 2, "minimum_chrome_version": "31.0", "offline_enabled": true, "app": ( "Background": ( "scripts": [ "js/Background.js"] )), "permissions": [ ("fileSystem": ["write"]) ], "file_handlers": ( "text": ( "title": "간단한 텍스트", "types" ": ["application/javascript", "application/json", "application/xml", "text/*"], "확장": ["c", "cc", "cpp", "css", " h", "hs", "html", "js", "json", "md", "py", "textile", "txt", "xml", "yaml"] ) ) )
여기서 우리가 접한 필드를 살펴보겠습니다. 이름과 설명으로 모든 것이 명확합니다. 버전은 필수 필드입니다. Chrome 웹 스토어에서는 앱 업데이트를 다운로드할 때 버전을 변경해야 합니다.
Var EntryToLoad = null; function init(launchData) ( var fileEntry = null if (launchData && launchData["items"] && launchData["items"].length > 0) ( EntryToLoad = launchData["items"]["entry"] ) var options = ( 프레임: "chrome", minWidth: 400, minHeight: 400, width: 700, height: 700 ) chrome.app.window.create("index.html", options);
백그라운드 페이지는 애플리케이션 창에 관계없이 백그라운드에서 실행됩니다. 대부분의 경우 메모리에 로드되지 않습니다. 시스템이 시작되면 해당 코드가 실행되고 특정 이벤트에 대한 핸들러를 설치할 수 있으며, 가장 일반적인 이벤트는 onLaunched입니다. 핸들러가 설치되면 배경 페이지는 일반적으로 메모리에서 언로드되고 구독하는 이벤트 중 하나가 발생한 경우에만 다시 실행됩니다.
사용자가 애플리케이션 아이콘을 클릭하거나 그 안의 파일을 열면 onLaunched 이벤트가 백그라운드 페이지에서 시작됩니다. 호출 매개변수, 특히 애플리케이션이 열어야 하는 파일이 전달됩니다. 코드 EntryToLoad = launchData["items"]["entry"]는 응용 프로그램으로 전송된 파일을 로컬 변수에 저장하며, 이 파일은 나중에 편집기 코드에서 가져옵니다. onLaunched 이벤트는 애플리케이션이 이미 열려 있는 경우에도 발생할 수 있습니다. 이 경우 배경 페이지의 코드는 새 창을 열지 아니면 이미 열려 있는 창에서 일부 작업을 수행할지 자체적으로 결정할 수 있습니다.
그림을 완성하기 위한 CSS는 다음과 같습니다.
본문( 여백: 0; ) 헤더( background-color: #CCC; border-bottom: 1px solid #777; -webkit-box-align: center; -webkit-box-orient: horizon; -webkit-box-pack: 왼쪽; 디스플레이: -webkit-box; 높이: 48px; 패딩: 0px 12px 0px 12px; ) 버튼( 여백: 8px; ) 텍스트 영역( 테두리: 없음; -webkit-box-sizing: 테두리 상자; 글꼴 계열: 고정 폭) ; 패딩: 4px; 위치: 절대; 하단: 0px; 텍스트 영역: 초점(개요: 없음 !중요;)
기본 코드: 파일 작업
이 예에서는 단순화를 위해 최소한의 기능 세트로 제한하므로 기본 편집기 코드는 거의 독점적으로 파일 작업에만 사용됩니다. 이를 위해 여러 API가 사용되며 그 중 일부는 이미 W3C 표준화를 진행 중입니다. File API 및 관련 인터페이스는 별도의 기사를 작성할 가치가 있는 큰 주제입니다. 좋은 소개글로 추천드립니다.그럼, js/main.js의 코드를 살펴보겠습니다. 단편적으로 제공할 예정이며 전체 코드는 Github에 있습니다.
함수 init(entry) ( $("#open").click(open); $("#save").click(save); $("#saveas").click(saveAs); chrome.runtime.getBackgroundPage (function(bg) ( if (bg.entryToLoad) loadEntry(bg.entryToLoad); ) ) $(document).ready(init);
초기화 함수의 작업은 버튼에 핸들러를 추가하고 배경 페이지에서 파일을 열어서 여는 것입니다. 배경 페이지 컨텍스트는 chrome.runtime.getBackgroundPage 를 사용하여 기본 창에서 비동기적으로 가져옵니다.
버튼 클릭 핸들러:
Var currentEntry = null; function open() ( chrome.fileSystem.chooseEntry(("type": "openWritableFile"), loadEntry); ) function save() ( if (currentEntry) ( saveToEntry(currentEntry); ) else ( saveAs(); ) ) 함수 saveAs() ( chrome.fileSystem.chooseEntry(("type": "saveFile"), saveToEntry); )
현재 FileEntry를 전역 변수 currentEntry에 저장합니다.
위 코드의 유일한 특정 기능은 chrome.fileSystem.chooseEntry 메소드입니다. 이 방법을 사용하면 파일 선택 창이 열립니다(각 시스템마다 고유함). 파일 시스템 작업을 위한 다른 모든 함수와 마찬가지로 이 메서드는 비동기식이며 작업을 계속하기 위한 콜백을 받습니다(이 경우 아래 설명된 loadEntry 및 saveToEntry 함수).
파일 읽기:
함수 setTitle() ( chrome.fileSystem.getDisplayPath(currentEntry, function(path) ( document.title = path + " - Simple Text"; )); ) 함수 loadEntry(entry) ( currentEntry = 항목; setTitle(); 항목. file(readFile); ) function readFile(file) ( var reader = new FileReader(); reader.onloadend = function(e) ( $("textarea").val(this.result); ); reader.readAsText(file ;)
setTitle() 함수에서 창 제목을 변경하여 현재 파일의 경로를 표시합니다. 이 제목이 표시되는 방식은 시스템에 따라 다릅니다. Chrome OS에서는 전혀 표시되지 않습니다. chrome.fileSystem.getDisplayPath는 사용자에게 표시하기에 적합한 파일 경로를 가져오는 가장 올바른 방법입니다. 또 다른 경로 표현은 Entry.fullPath 를 통해 사용할 수 있습니다.
File API에는 파일을 설명하는 두 가지 개체(FileEntry 및 File)가 있습니다. 대략적으로 말하면 FileEntry는 파일의 경로를 나타내고 File은 포함된 데이터를 나타냅니다. 따라서 파일을 읽기 위해서는 Entry별로 File 객체를 얻어야 한다. 이는 비동기식 Entry.file() 메소드를 사용하여 수행됩니다.
이 예제의 코드는 기사 형식에 맞게 최대한 짧게 유지됩니다. 특정 Chrome API 기능이 사용되는 방법에 대한 더 자세한 예를 보려면 GitHub에 게시된 다양한 Chrome 앱 예를 참조하세요. 모든 API에 대한 공식 문서는 개발자.chrome.com에 있습니다. Chrome 애플리케이션 프로그래밍에 관한 특정 질문에 대한 답변을 얻을 수 있는 주요 장소는 다음과 같습니다.
우리는 지난 2014년 결과를 바탕으로 Chrome 브라우저에 꼭 필요한 인기 애플리케이션 목록에 대한 자체 비전을 대중에게 제시합니다. 자료를 준비할 때 전문가들은 하나의 매우 기본적인 지표, 즉 표준 데스크톱 애플리케이션을 완벽하게 대체하는 Chrome 애플리케이션의 기능에 의존했습니다. 이러한 이유로 일상적인 문제를 해결하는 데 자주 사용되는 오프라인 애플리케이션과 도구가 주요 항목 중 하나였습니다.
원격 데스크탑
이름은 거의 그 자체로 말합니다. 모든 사용자는 다른 컴퓨터에 액세스하거나 자신의 홈 화면을 공유할 수 있기를 꿈꿉니다. 물론 이 애플리케이션은 Windows나 TeamViewer와 다르지만 사용하기가 훨씬 쉽고 편리합니다.
이제 데스크톱 클라이언트에서 메일 작업이 더욱 편리해졌습니다. 모든 발신 서신은 인터넷에 연결하지 않고도 미리 준비할 수 있습니다. 또한, 동기화 기능이 제공되어 들어오는 모든 메일을 오프라인으로 관리하는 것도 가능합니다. 전통적인 Gmail 인터페이스를 갖춘 매우 편리한 이 애플리케이션은 Chrome 브라우저를 사용하는 모든 전문가에게 유용할 것입니다.
일상 업무를 변화시키는 가장 최적의 방법이 흥미로운 일이 될 수 있다는 데 동의하지 않기는 어렵습니다. 이메일 게임 애플리케이션을 사용하면 운영 및 메일 관리가 등급, 레벨링, 완료 시간 및 보너스를 제공하는 흥미로운 컴퓨터 게임으로 변환됩니다. 가장 야심찬 사용자를 위해 받은 편지함 우승자 타이틀을 놓고 그룹 경쟁이 제공됩니다.
많은 사람들이 이미 Google 문서도구를 오프라인에서 사용할 때의 모든 이점을 높이 평가했습니다. 모든 감정가는 제안된 응용 프로그램을 가지고 있어야 합니다. Google 오피스 제품군을 독립형 형식으로 사용할 가능성이 아직 제시되지 않은 상황에서는 시간을 낭비할 필요가 없습니다. 응용 프로그램을 설치하고, 문서 설정에서 오프라인 액세스를 사용하고, 인터넷 존재 여부에 관계없이 할당된 작업 수행을 시작하세요.
텍스트
이것은 아마도 코드 구문 강조 기능과 Google 드라이브 통합을 통해 한 번에 여러 파일을 동시에 작업할 수 있는 기능을 갖춘 가장 간단하고 편안하며 빠른 텍스트 편집기일 것입니다. 해당 카테고리 최고의 편집기입니다.
다시 말하지만, 애플리케이션 이름이 이미 모든 것을 말해줍니다. 기본적으로 가장 인기 있는 러시아어 소셜 네트워크에 데스크톱 이메일 클라이언트 옵션을 추가하여 인터넷 없이도 온라인으로 연락처에 액세스하고 서신을 보낼 수 있습니다.
오랫동안 Telegram은 본격적인 기업 메신저로 간주되었습니다. 이것은 많은 업무 문제를 신속하게 해결하는 데 필요한 모든 기능을 갖춘 가장 빠르고 안전하며 편리한 응용 프로그램 중 하나입니다. 이러한 맥락에서 Telegram은 모바일 클라이언트가 그다지 편안하지 않은 옵션에 이상적입니다.
매우 인기 있고 편리한 지연읽기 서비스입니다. Pocket에는 별도의 특수 버튼이 있어 한 번의 클릭으로 즉시 읽을 수 있도록 게시물을 따로 설정할 수 있습니다. 뛰어난 애플리케이션을 사용하면 인터넷에 접속하지 않고도 보류 중인 기사를 읽을 수 있습니다.
듣다
VK에서 음악을 듣고 검색하고 오프라인으로 듣고 Google 드라이브와 통합하는 기능을 갖춘 비교할 수 없는 클라우드 플레이어입니다. 이제 Yandex.Music 및 Last.FM 데이터베이스를 사용하여 새 노래를 검색할 수 있습니다. 음악 애호가들에게는 다른 가치 있는 대안이 없습니다.
Pixlr 편집기
잊지 말고 시간 맞춰서 해보세요
도구의 전체 목록을 말할 수 있습니다. 오늘날 많은 사람들은 도구 없이는 일상 활동을 상상할 수 없습니다. 이것들은 모든 종류의 메모리 확장기, 쇼핑 목록, 메모, 메모장, 작업 관리자, 미리 알림입니다. 우리는 개별적으로 각 서비스가 목적에 따라 완전히 개별적이라고 말할 수 있지만 모두 동일한 의미를 가지고 있습니다. 잊지 말고 수행할 시간이 있어야 합니다. 하나의 응용 프로그램을 가장 좋아하는 응용 프로그램으로 결정하는 것은 매우 어렵습니다. 공통점이 많지만 모두 독특하고 약간 다른 문제를 해결합니다. 어떤 사람들은 단순한 모든 것을 선호하고, 어떤 사람들은 복잡하고 정교한 제품을 선호합니다. GTD 방법론 준수에 가치를 두는 사람도 있고 직관성과 편의성을 우선시하는 사람도 있습니다.
블로그나 대중적인 기술을 팔로우하는 경우 Techcrunch Download Squad, 웹 애플리케이션에 대한 티저 메시지를 보셨을 것입니다. 구글 크롬, 새로운 기능 크롬개발자들은 구글 크롬한동안 회사 계획을 개발해 왔습니다. Google제공하고 있다 웹 애플리케이션새 버전에서는 Chrome 웹 스토어. 사용자가 사용하는 무료 및 유료 애플리케이션이 있습니다. 크롬웹 브라우저에 설치할 수 있습니다.
Chrome 웹 앱브라우저 확장 관리자에 나열되어 있지만 확장 프로그램과 확장 프로그램 간에는 약간의 차이점만 있습니다. Chrome 웹 앱. Chrome 웹 앱기본적으로 설치되며 컴퓨터에 설치되어 있는 경우 쉽게 액세스할 수 있는 새 페이지 탭에 나타납니다.
Google 크롬 웹 앱.
누르다 웹 애플리케이션 TabBar 왼쪽에 열립니다.. 탭 아이콘은 아이콘을 사용하지 않고 로컬 아이콘이 있기 때문에 고해상도라는 점을 제외하면 언뜻 보면 고정된 탭과 유사해 보입니다.
Chrome 웹 앱.
위 스크린샷은 두 가지를 보여줍니다. Chrome 웹 앱 그리고 하나탭에서. Gmail과 Google Calendar는 웹 애플리케이션입니다. 이를 클릭하면 브라우저에서 해당 서비스의 웹 페이지가 열립니다. 현재로서는 더 나은 탭 아이콘과 웹 앱이 새로운 북마크에 나열된다는 사실 외에는 웹 앱과 탭 보류 간의 기존 차이점을 파악할 수 없습니다. 이것이 개념의 예라고 생각합니다. 예를 들어 Techcrunch 기사에서는 웹사이트가 아닌 로컬에서 실행될 가능성이 있는 게임의 스크린샷을 보여줍니다.
Chrome 웹 앱 게임
위 스크린샷에서 볼 수 있듯이 주소에 URL이 없습니다.로컬에서 실행 중이거나 URL이 화면에서 제거되었다고 가정합니다.
Google Chrome Dev에서 Chrome 웹 앱을 활성화하는 방법
Chrome 웹 앱 G에 포함될 수 있음 oogle 크롬 - 크롬. 다운로드 Squad에는 다음 지침이 있습니다.
구글 크롬테스트를 위한 세 가지 웹 애플리케이션이 함께 제공됩니다. Google Docs, Gmail 및 Google Calendar의 기능을 제공합니다.
애플리케이션은 Windows의 경우 C:\Users\username\AppData\Local\Google\Chrome\Application\6.0.453.1\Resources\에 있습니다. 새로운 버전이 출시될 때마다 버전이 변경된다는 점에 유의하세요. 크롬.
브라우저에서 launch-enable-applications 설정을 추가해야 합니다. 가장 쉬운 방법은 바로가기를 만들고 바로가기를 마우스 오른쪽 버튼으로 클릭한 후 속성을 선택하는 것입니다. C:\Users\username\AppData\Local\Google\Chrome\Application\chrome.exe 활성화 애플리케이션이 끝나면 대상은 다음과 같아야 합니다.
이제 도구 모음에서 렌치 아이콘을 클릭하여 확장 메뉴를 엽니다. 크롬, 거기에 도구와 확장 프로그램이 표시됩니다.
확장팩 풀기를 선택하고 리소스 폴더로 이동합니다. 각 Chrome 웹 앱별도로 설치해야 합니다.
웹 애플리케이션새 탭 페이지에 즉시 나타나서 실행할 수 있습니다. 이에 대해 어떻게 생각하시나요? 댓글로 알려주세요.