วิธีสร้างและเผยแพร่แอปและส่วนขยาย Chrome Google Chrome Web Apps คืออะไร? แอป Chrome คืออะไร

ด้วยความช่วยเหลือของแอพพลิเคชั่นมากมายคุณไม่เพียงสามารถขยายความสามารถของเบราว์เซอร์ได้อย่างมีนัยสำคัญ แต่ยังสามารถปรับแต่งได้ในแบบของคุณเอง นี่เป็นแนวคิดที่ Google ได้รับคำแนะนำดังนั้นจึงพยายามสร้างสิ่งต่างๆ แอป Google โครเมียม เพื่อให้เหมาะกับผู้ใช้ทุกคน

ก่อนอื่นควรตอบคำถาม ทำไมเราต้องใช้แอป Google Chrome เลยเหรอ? ไซต์สมัยใหม่มีคุณลักษณะแบบไดนามิกต่างๆซึ่งก่อนหน้านี้มีให้เฉพาะโปรแกรมที่ติดตั้งบนคอมพิวเตอร์เท่านั้น แต่วันนี้ไม่จำเป็นต้องใช้โปรแกรมมากมายเหล่านี้ คุณเพียงแค่ต้องติดตั้งแอปพลิเคชันซึ่งใช้พื้นที่ดิสก์น้อยกว่ามากและไม่ควรล้มเหลว (ตามที่นักพัฒนารับประกัน)

แต่คุณควรแยกความแตกต่างระหว่างบุ๊กมาร์กและแอปพลิเคชันที่แท้จริง... มีบุ๊กมาร์กจำนวนมากไปยังไซต์ต่างๆในขณะนี้ แต่ไม่สามารถเรียกได้ว่าเป็นแอปพลิเคชันที่แท้จริง แต่เป็นเรื่องหลังที่เรากำลังคุยกัน แอป Google Chrome คืออะไรและมีความสามารถอะไรบ้าง?

มากที่สุดแห่งหนึ่ง แอปพลิเคชั่นที่มีประโยชน์ Google Chrome เป็นแผ่นจดบันทึกมากมาย ดังนั้น notepad Quick Note คล้ายกับข้อความ เอกสาร Microsoft คำ... คุณควรเปิดโปรแกรมโดยเฉพาะ แต่โน้ตบุ๊กสามารถใช้งานได้ทันทีในส่วนแอปพลิเคชัน คุณสามารถเขียนทุกอย่างลงไปได้โดยไม่ต้องออกจากเบราว์เซอร์ คุณไม่จำเป็นต้องบันทึกอะไรเลย! ทุกอย่างเกิดขึ้นโดยอัตโนมัติ แอป Google Chrome นี้ใช้งานได้แม้ว่าการเชื่อมต่ออินเทอร์เน็ตของคุณจะไม่ทำงาน

ทวีตเด็ค เป็นแอปพลิเคชั่นที่มีประโยชน์มากสำหรับผู้ใช้ทุกคนที่มักมีการสนทนาบนโซเชียลเน็ตเวิร์กมากมาย ด้วยความช่วยเหลือคุณสามารถติดตามกิจกรรมและบทสนทนาทั้งหมดบน Twitter, Facebook, LinkedIn, Google Buzz, Foursquare, MySpace

Google Talk เป็นมากกว่าส่วนขยายมากกว่าแอป... ถึงกระนั้นควรกล่าวถึงคุณลักษณะที่มีประโยชน์นี้ด้วย ด้วย Google Talk คุณสามารถติดต่อกับผู้ที่อยู่ในรายชื่อติดต่อ Google+ ของคุณได้ตลอดเวลา เป็นที่น่ายินดีอย่างยิ่งที่หน้าต่างแชทจะยังคงเปิดและใช้งานอยู่เสมอแม้ว่าคุณจะเปลี่ยนจากแท็บหนึ่งไปอีกแท็บหนึ่งก็ตาม

ยอมรับว่าแอป Google Chrome ควรมีประโยชน์สำหรับผู้ใช้ทุกคน คิด คุณต้องใช้เครื่องคิดเลขกี่ครั้งเพื่อคำนวณข้อมูลใด ๆเหรอ? การสลับไปมาระหว่างหน้าต่างเบราว์เซอร์และเครื่องคิดเลขซึ่งไม่มีฟังก์ชั่นทั้งหมดที่คุณอาจต้องการในบางครั้งเป็นเรื่องที่น่าเบื่อหน่าย และฟังก์ชันที่ไม่มีในเครื่องคิดเลขมาตรฐานจะต้องค้นหาบนอินเทอร์เน็ต แต่ต้องขอบคุณแอปเครื่องคิดเลข Google Chrome ทั้งหมดนี้ไม่จำเป็นอีกต่อไป มีเครื่องคิดเลขทุกประเภทมากมายในขณะนี้ ฟังก์ชันและการออกแบบแตกต่างกัน

Calculatoure เป็นแอปที่ดีที่สุดสำหรับผู้ใช้ทุกคนที่ต้องการคำนวณปัญหาทางคณิตศาสตร์ที่ซับซ้อน เครื่องคำนวณตัวเลข ใช้งานง่ายขึ้นและมีอินเทอร์เฟซที่ดีมาก นอกจากนี้ยังมีฟังก์ชันสำหรับการแปลงค่า

มีแอป Google Chrome ที่มีประโยชน์อะไรอีกบ้าง? ในบรรดาแอพพลิเคชั่นต่างๆควรแยกแยะพจนานุกรม... เพื่อที่คุณจะได้ไม่ต้องค้นหาคำแปลอยู่ตลอดเวลาคุณสามารถใช้ โปรแกรมที่ดี... ในบรรดาพจนานุกรมมากมายคุณสามารถเลือกพจนานุกรมที่คุณชอบมากที่สุดได้ ทางเลือกมีไม่ จำกัด คุณสามารถใช้ได้ทั้ง En-Ru Translator และ Yandex.Dictionaries หรือคุณอาจสนใจในอุตสาหกรรมยานยนต์? และในกรณีนี้มีแอปพลิเคชั่นที่มีประโยชน์! ทุกสิ่งที่เกี่ยวข้องกับรถยนต์มีอยู่ในพจนานุกรม Cars

แอป Google Chrome ที่มีประโยชน์อื่น ๆ ได้แก่ นาฬิกาและสัญญาณเตือนต่างๆ... ในบรรดานาฬิกาปลุกและนาฬิกามากมายคุณสามารถเลือกแอปพลิเคชันที่เหมาะกับคุณที่สุดในแง่ของฟังก์ชันการทำงาน

อย่างไรก็ตามเกมยังเป็นแอปพลิเคชัน Google Chrome ในบรรดาเกมต่างๆควรสังเกตแอปพลิเคชั่นยอดนิยมซึ่งเป็นที่นิยมอย่างมากกับผู้คนจำนวนมากทั่วโลก บางคนอาจคิดว่านกน่ารำคาญและหมูสีเขียวนั้นไม่เป็นที่นิยมอีกต่อไป แต่ในความเป็นจริง แอพ Angry Birds ถือเป็นหนึ่งในดีที่สุดของทั้งหมดที่ออกมาในปี 2011 อย่างไรก็ตามต้องขอบคุณเกมนี้ที่ทำให้นักพัฒนาสามารถดึงดูดความสนใจของผู้ใช้ทุกคนมาที่ความสามารถในการเล่นเกมของแพลตฟอร์ม Google Chrome

หากคุณติดตามเทคโนโลยียอดนิยมเช่นบล็อกหรือ Techcrunch Download Squad คุณอาจสังเกตเห็นโพสต์ทีเซอร์เกี่ยวกับเว็บแอป Google Chrome, ฟังก์ชั่นใหม่ โครเมียม นักพัฒนาคนไหน Google Chrome มีการพัฒนามาระยะหนึ่งแล้วแผน บริษัท Google คือการให้ แอปพลิเคชันบนเว็บ ใน เวอร์ชั่นใหม่ Chrome เว็บสโตร์... มีแอพฟรีและจ่ายเงินที่ผู้ใช้ โครเมียม สามารถติดตั้งในเว็บเบราว์เซอร์

เว็บแอป Chrome รายการในตัวจัดการส่วนขยายเบราว์เซอร์มีความแตกต่างบางประการระหว่างส่วนขยายและ เว็บแอป Chrome. เว็บแอป Chrome ติดตั้งตามค่าเริ่มต้นและแสดงในแท็บ หน้าใหม่ที่ซึ่งสามารถเข้าถึงได้ง่ายหากมีการติดตั้งบนคอมพิวเตอร์

เว็บแอปพลิเคชัน Google Chrome.

กดบน โปรแกรมประยุกต์บนเว็บ และจะเปิดขึ้นทางด้านซ้ายของ TabBar... แท็บไอคอนดูเหมือนแท็บที่ตรึงไว้เมื่อมองแวบแรกยกเว้นว่าจะมีความละเอียดสูงเนื่องจากไม่ใช้ไอคอน แต่มีไอคอนในเครื่อง

เว็บแอปพลิเคชัน Chrome
ภาพหน้าจอด้านบนแสดงสองรายการ เว็บแอป Chrome และหนึ่ง ในแท็บ Gmail และ Google ปฏิทินเป็นเว็บแอปพลิเคชัน การคลิกที่พวกเขาจะเปิดหน้าเว็บบริการในเบราว์เซอร์ ฉันไม่สามารถเข้าใจถึงความแตกต่างที่มีอยู่ระหว่างเว็บแอปพลิเคชันและการเก็บรักษาแท็บได้อย่างตรงไปตรงมาในตอนนี้นอกเหนือจากไอคอนแท็บที่ดีที่สุดและความจริงที่ว่าเว็บแอปพลิเคชันแสดงอยู่ในแท็บใหม่ฉันเชื่อว่านี่เป็นตัวอย่างของแนวคิด ตัวอย่างเช่นบทความ Techcrunch จะแสดงภาพหน้าจอของเกมที่มีแนวโน้มว่าจะทำงานในพื้นที่ไม่ใช่บนเว็บไซต์

เกม Chrome บนเว็บแอป
ดังที่คุณเห็นในภาพหน้าจอด้านบนไม่มี URL ในที่อยู่สตริงโดยสมมติว่ากำลังทำงานในเครื่อง (หรือ URL ถูกลบออกจากหน้าจอ)
วิธีเปิดใช้งาน Chrome Web Apps ใน Google Chrome Dev
เว็บแอป Chrome สามารถรวมอยู่ใน G oogle Chrome - Chromium... ดาวน์โหลด Squad มีคำแนะนำ:
Google Chrome มาพร้อมกับเว็บแอปพลิเคชันสามรายการสำหรับการทดสอบ มีฟังก์ชันการทำงานของ Google เอกสาร, Gmail และ Google ปฏิทิน
แอปพลิเคชันอยู่ใน C: \\ Users \\ username \\ AppData \\ Local \\ Google \\ Chrome \\ Application \\ 6.0.453.1 \\ Resources \\ บน Windows โปรดทราบว่าเวอร์ชันจะมีการเปลี่ยนแปลงทุกครั้งที่ออกใหม่ โครเมียม.
คุณต้องเพิ่มตัวเลือก Launch-Enable-Apps ในเบราว์เซอร์ วิธีที่ง่ายที่สุดคือสร้างทางลัดคลิกขวาที่ทางลัดแล้วเลือกคุณสมบัติ เป้าหมายควรมีลักษณะเช่นนี้ที่ส่วนท้ายของ C: \\ Users \\ username \\ AppData \\ Local \\ Google \\ Chrome \\ Application \\ chrome.exe เปิดใช้งานแอปพลิเคชัน
ตอนนี้เปิดเมนูส่วนขยายโดยคลิกที่ไอคอนเครื่องมือในแถบเครื่องมือ โครเมียมคุณจะเห็นเครื่องมือและส่วนขยายที่นั่น
เลือกเปิดเครื่องรูดส่วนขยายและไปที่โฟลเดอร์ทรัพยากรของคุณ แต่ละ chrome เว็บแอป ต้องติดตั้งแยกต่างหาก
เว็บแอปพลิเคชัน ปรากฏในหน้า "แท็บใหม่" ทันทีซึ่งสามารถเปิดใช้งานได้คุณคิดอย่างไรเกี่ยวกับเรื่องนี้ แจ้งให้เราทราบในความคิดเห็น

ผู้ใช้ที่ใช้ Google Chrome เป็นเบราว์เซอร์เริ่มต้นอาจมีความคิดเกี่ยวกับร้านแอป ผู้ที่เคยทำงานร่วมกับพวกเขาจะทราบดีว่าแอปพลิเคชันเป็นเพียงลิงก์ไปยังหน้าอินเทอร์เน็ตของบริการออนไลน์ที่เกี่ยวข้อง โดยจะอยู่บนแผงเบราว์เซอร์แยกต่างหากตามที่อยู่: "chrome: // apps" (ดูตัวอย่างภาพหน้าจอ)
แอป Google Chrome

ล่าสุด บริษัท ได้เปิดตัวแอป Chrome บนเดสก์ท็อปที่พัฒนาในภาษา การเขียนโปรแกรม JavaScript และ HTML5 พวกเขาทำงานในกระบวนการแยกต่างหากจากเบราว์เซอร์และไม่ต้องใช้การเชื่อมต่อเครือข่ายแม้ว่าจะใช้เครื่องมือ Chrome ในการทำงานก็ตาม

แอป Google Chrome ใหม่

แอปพลิเคชันเบราว์เซอร์ Chrome เป็นโปรแกรมแบบสแตนด์อโลนที่เขียนด้วยภาษาโปรแกรม (ตามลำดับความนิยม):

  1. JavaScript - ใช้ในการเขียนสคริปต์สำหรับเบราว์เซอร์
  2. HTML เป็นภาษามาร์กอัปไฮเปอร์เท็กซ์สำหรับหน้าเว็บ
  3. Native Client - ช่วยให้คุณสามารถเรียกใช้แอปพลิเคชันในรูปแบบ เบราว์เซอร์ที่แตกต่างกันโดยไม่คำนึงถึง OS;
  4. Emscripten เป็นคอมไพเลอร์ C ++ ที่สร้างโค้ด JavaScript เป็นเอาต์พุต

บางครั้งมีการใช้เครื่องมือพัฒนาเว็บแอปพลิเคชันอื่น ๆ ที่เป็นที่นิยมน้อยกว่า แต่ไม่มีการใช้เทคโนโลยี Flash จาก Adobe ในตอนท้ายของการคอมไพล์ซอร์สโค้ดของโปรแกรมจะถูกบีบอัดหลังจากนั้นจะสามารถทำงานได้โดยอัตโนมัติโดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต Application Store เสนอให้ติดตั้ง Google Keep บนพีซีโปรแกรมแก้ไขกราฟิก Sketchpad หรือ Pixlr โน้ตบุ๊ก Writer หรือเกม Cut the Rope ในประเทศและเรียกใช้เป็นโปรแกรมคลาสสิกผ่านตัวเรียกใช้งาน แอปพลิเคชัน อย่างไรก็ตามมันไม่ได้อยู่ในความครอบครองของ Windows และยังทำงานบน Linux และ MacOS

Chrome - แพลตฟอร์มสำหรับเปิดตัวแอปพลิเคชัน

โปรดทราบว่าเมื่อใช้แอปพลิเคชันร้านค้าออนไลน์ของ Google Chrome จะติดตั้งแผงสำหรับเปิดโปรแกรมในโหมดอัตโนมัติโดยไม่ถามหรือแจ้งให้ผู้ใช้ทราบเกี่ยวกับการดำเนินการ

รูปที่ 1. แผงควบคุมพร้อมแอปพลิเคชัน

เมื่อการติดตั้งเสร็จสิ้นทางลัดจะถูกสร้างขึ้นในแถบงานที่เปิดตัวเรียกใช้งานซึ่งจะแสดงรายการแอปพลิเคชันสำหรับ Chrome ที่ใช้บนคอมพิวเตอร์ โปรแกรมจะเปิดใช้งานหรือถอนการติดตั้งโดยไม่ต้องใช้งานอินเทอร์เน็ตเบราว์เซอร์ แอปพลิเคชันเก่าที่แนะนำให้เปลี่ยนด้วยแอปที่อัปเดตจะมีลูกศรเป็นทางลัด (อันที่จริงแล้วคือ - นำไปสู่ไซต์ที่เกี่ยวข้อง)

เครื่องเรียกใช้งานแอป Chrome จะซิงโครไนซ์บุ๊กมาร์กประวัติการเดินเรือรหัสผ่านที่บันทึกไว้ ฯลฯ หากคุณลบแอปการตั้งค่า Google Chrome โดยไม่ได้ตั้งใจให้ไปที่ https://chrome.google.com/webstore/launcher แล้วดาวน์โหลด เขา.

ตัวอย่างแอป Chrome สำหรับเดสก์ท็อป

google chrome store มีโปรแกรมพีซีจำนวนมากรวมถึงกราฟิกมัลติฟังก์ชั่นและ โปรแกรมแก้ไขข้อความ, ตัวแปลงหน่วย, ยูทิลิตี้การจดบันทึก, เกมมากมาย, ไคลเอนต์สำหรับเครือข่ายสังคมออนไลน์และบริการอื่น ๆ โปรแกรม Google Chrome เสร็จสมบูรณ์และจะแทนที่แอปพลิเคชันประจำวันของคุณได้อย่างง่ายดายโดยเฉพาะอย่างยิ่งเมื่อทำงานแบบออฟไลน์ การใช้โปรแกรม Google มีข้อดีหลายประการ:

  • สามารถเข้าถึงบริการได้ตลอดเวลา:
  • การซิงโครไนซ์กับเบราว์เซอร์บนอุปกรณ์ทั้งหมดหลังการอนุญาต
  • อย่าทำให้เกิดข้อผิดพลาดร้ายแรงใน Windows

TechSmith Snagit

รูปที่ 2 โปรแกรมแก้ไขกราฟิก TechSmith Snagit

ด้วยเหตุนี้เราจึงได้รับโปรแกรมแก้ไขกราฟิกที่ไม่สามารถสร้างภาพหน้าจอและฟังก์ชันได้อย่างอิสระโดยไม่ใช้อินเทอร์เน็ต (สำหรับปลั๊กอินที่ใช้จับภาพหน้าจอคุณต้องเชื่อมต่อเครือข่าย)

กระเป๋า

เมื่อเข้าสู่ Google Store หลายคนให้ความสนใจกับแอปพลิเคชันสำหรับ Google Chrome ที่เรียกว่า Pocket ซึ่งเป็นลูกค้าของบริการที่มีชื่อเดียวกัน ออกแบบมาเพื่อจัดเก็บบทความที่น่าสนใจสำหรับผู้ใช้ซึ่งเขาวางแผนที่จะอ่านในภายหลัง โปรแกรมจะแสดงรายการบทความที่บันทึกไว้ในรูปแบบของภาพขนาดย่อและช่วยให้คุณสามารถค้นหาสิ่งพิมพ์ที่ต้องการตามชื่อเรื่อง ในกระบวนการบันทึกหน้าอินเทอร์เน็ตจะถูกล้างโฆษณา
นอกจากนี้ Pocket ยังช่วยให้คุณสามารถบันทึกสิ่งพิมพ์ลงในที่เก็บถาวรหรือแบ่งปันกับสิ่งที่น่าสนใจที่สุดกับเพื่อน ๆ ใน สังคมออนไลน์ หรือส่งทางอีเมล

ในการทดสอบแอปพลิเคชันที่คุณกำลังพัฒนาคุณจะต้องเพิ่มลงในเบราว์เซอร์ของคุณ ในการดำเนินการนี้ให้เลือกช่องทำเครื่องหมาย "โหมดนักพัฒนาซอฟต์แวร์" ในหน้า chrome: // extensions หลังจากนั้นคุณจะสามารถเพิ่มส่วนขยายหรือแอปพลิเคชันของคุณได้

manifest.json

รหัสสำหรับแอปพลิเคชันสำหรับ Chrome เช่นส่วนขยายใด ๆ เริ่มต้นด้วยไฟล์ manifest.json อธิบายข้อมูลเมตาทั้งหมดสำหรับแอปพลิเคชัน นี่คือรายการทั้งหมดของบรรณาธิการ:

("name": "Simple Text", "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"])), "สิทธิ์": [("fileSystem": ["write"])], "file_handlers": ("text": ("title": "Simple Text", "types ": [" application / javascript "," application / json "," application / xml "," text / * "]," extensions ": [" c "," cc "," cpp "," css "," h "," hs "," html "," js "," json "," md "," py "," สิ่งทอ "," txt "," xml "," yaml "])))

ลองวิเคราะห์ฟิลด์ที่พบที่นี่ ทุกอย่างชัดเจนพร้อมชื่อและคำอธิบาย เวอร์ชันเป็นฟิลด์บังคับ Chrome เว็บสโตร์จะกำหนดให้เปลี่ยนแปลงเมื่อคุณดาวน์โหลดการอัปเดตไปยังแอปของคุณ

Var entryToLoad \u003d null; ฟังก์ชัน init (launchData) (var fileEntry \u003d null if (launchData && launchData ["items"] && launchData ["items"]. length\u003e 0) (entryToLoad \u003d launchData ["items"] ["entry"]) var options \u003d (เฟรม: "chrome", minWidth: 400, minHeight: 400, width: 700, height: 700); chrome.app.window.create ("index.html", options);) chrome.app.runtime.onLaunched addListener (init);

หน้าพื้นหลังทำงานในพื้นหลังโดยไม่ขึ้นกับหน้าต่างแอปพลิเคชัน เวลาส่วนใหญ่ไม่ได้โหลดลงในหน่วยความจำ เมื่อระบบเริ่มทำงานโค้ดของระบบจะถูกเรียกใช้งานและสามารถติดตั้งตัวจัดการเหตุการณ์ซึ่งส่วนใหญ่จะเป็น onLaunched เมื่อมีการตั้งค่าตัวจัดการเพจพื้นหลังมักจะถูกยกเลิกการโหลดจากหน่วยความจำและเริ่มทำงานกลับก็ต่อเมื่อเกิดเหตุการณ์ใดเหตุการณ์หนึ่ง

เมื่อผู้ใช้คลิกที่ไอคอนแอปพลิเคชันหรือเปิดไฟล์ในนั้นเหตุการณ์ onLaunched จะเริ่มทำงานในหน้าพื้นหลัง พารามิเตอร์การโทรจะถูกส่งไปยังไฟล์โดยเฉพาะอย่างยิ่งไฟล์ที่แอปพลิเคชันควรเปิด รหัส entryToLoad \u003d launchData ["items"] ["entry"] จะบันทึกไฟล์ที่ถ่ายโอนไปยังแอปพลิเคชันในตัวแปรโลคัลจากที่ที่โค้ดตัวแก้ไขจะนำไป เหตุการณ์ onLaunched ยังสามารถเกิดขึ้นได้เมื่อเปิดแอปพลิเคชันอยู่แล้ว ในกรณีนี้โค้ดในหน้าพื้นหลังสามารถตัดสินใจได้เองว่าจะเปิดหน้าต่างใหม่หรือดำเนินการบางอย่างในหน้าต่างที่เปิดอยู่แล้ว

เพื่อความสมบูรณ์นี่คือ CSS:

เนื้อหา (ระยะขอบ: 0;) ส่วนหัว (สีพื้นหลัง: #CCC; border-bottom: 1px solid # 777; -webkit-box-align: center; -webkit-box-orient: horizontal; -webkit-box-pack: left; display: -webkit-box; height: 48px; padding: 0px 12px 0px 12px;) button (margin: 8px;) textarea (border: none; -webkit-box-sizing: border-box; font-family: monospace ; padding: 4px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 48px; ด้านล่าง: 0px; left: 0px; right: 0px; width: 100%;) textarea: focus (outline: none! important;)

รหัสหลัก: ทำงานกับไฟล์

เนื่องจากในตัวอย่างของเราเราจะ จำกัด ตัวเองไว้ที่ชุดคุณสมบัติขั้นต่ำเพื่อความเรียบง่ายโค้ดตัวแก้ไขหลักจะทุ่มเทให้กับการทำงานกับไฟล์โดยเฉพาะ ด้วยเหตุนี้จึงมีการใช้ API หลายตัวซึ่งบางส่วนกำลังเข้าสู่มาตรฐาน W3C แล้ว File API และอินเทอร์เฟซที่เกี่ยวข้องเป็นหัวข้อใหญ่ที่สมควรได้รับบทความแยกต่างหาก ขอแนะนำเป็นคำนำที่ดี

ลองวิเคราะห์โค้ดใน js / main.js ฉันจะอ้างอิงเป็นเศษเล็กเศษน้อยรหัสเต็มอยู่ใน GitHub

ฟังก์ชัน init (รายการ) ($ ("# open") คลิก (เปิด); $ ("# บันทึก") คลิก (บันทึก); $ ("# saveas") คลิก (saveAs); chrome.runtime.getBackgroundPage (ฟังก์ชัน (bg) (if (bg.entryToLoad) loadEntry (bg.entryToLoad);));) $ (document) .ready (init);

หน้าที่ของฟังก์ชันการเตรียมใช้งานคือการเพิ่มตัวจัดการลงในปุ่มและรับไฟล์เพื่อเปิดจากหน้าพื้นหลัง บริบทของหน้าพื้นหลังถูกดึงมาจากหน้าต่างหลักแบบอะซิงโครนัสโดยใช้ chrome.runtime.getBackgroundPage

ตัวจัดการการคลิกปุ่ม:

Var currentEntry \u003d null; function open () (chrome.fileSystem.chooseEntry (("type": "openWritableFile"), loadEntry);) function save () (if (currentEntry) (saveToEntry (currentEntry);) else (saveAs ();)) function saveAs () (chrome.fileSystem.chooseEntry (("type": "saveFile"), saveToEntry);)

เราจะเก็บ FileEntry ปัจจุบันไว้ในตัวแปร global currentEntry

คุณลักษณะเฉพาะในโค้ดด้านบนคือเมธอด chrome.fileSystem.chooseEntry เมื่อใช้วิธีนี้หน้าต่างการเลือกไฟล์จะเปิดขึ้น (ของแต่ละระบบ) เช่นเดียวกับฟังก์ชันอื่น ๆ ทั้งหมดสำหรับการทำงานกับระบบไฟล์วิธีนี้เป็นแบบอะซิงโครนัสและได้รับการติดต่อกลับเพื่อทำงานต่อ (ในกรณีของเราคือฟังก์ชัน loadEntry และ saveToEntry อธิบายไว้ด้านล่าง)

การอ่านไฟล์:

ฟังก์ชัน setTitle () (chrome.fileSystem.getDisplayPath (currentEntry, function (path) (document.title \u003d path + "- Simple Text";));) function loadEntry (entry) (currentEntry \u003d entry; setTitle (); entry. ไฟล์ (readFile);) ฟังก์ชั่น readFile (ไฟล์) (var reader \u003d new FileReader (); reader.onloadend \u003d function (e) ($ ("textarea"). val (this.result);); reader.readAsText (ไฟล์ );)

ในฟังก์ชัน setTitle () เราเปลี่ยนชื่อของหน้าต่างเพื่อแสดงเส้นทางไปยังไฟล์ปัจจุบัน วิธีแสดงชื่อเรื่องนี้ขึ้นอยู่กับระบบ ไม่ปรากฏเลยบน Chrome OS chrome.fileSystem.getDisplayPath เป็นวิธีที่ถูกต้องที่สุดในการรับเส้นทางไฟล์ที่เหมาะสมสำหรับการแสดงต่อผู้ใช้ การแสดงเส้นทางอื่นสามารถใช้ได้ผ่าน entry.fullPath

File API มีอ็อบเจ็กต์สองแบบที่อธิบายไฟล์: FileEntry และ File กล่าวโดยคร่าวๆ FileEntry แสดงถึงพา ธ ไปยังไฟล์และ File แสดงถึงข้อมูลที่มีอยู่ ดังนั้นในการอ่านไฟล์คุณต้องได้รับวัตถุไฟล์โดยรายการ ซึ่งทำได้โดยใช้วิธีการแบบอะซิงโครนัส entry.file ()

โค้ดสำหรับตัวอย่างนี้ถูกทำให้สั้นที่สุดเพื่อให้พอดีกับรูปแบบของบทความ หากคุณต้องการดูตัวอย่างโดยละเอียดเพิ่มเติมเกี่ยวกับวิธีการใช้คุณลักษณะบางอย่างของ Chrome API ตัวอย่างแอป Chrome จำนวนมากได้รับการเผยแพร่บน GitHub เอกสารอย่างเป็นทางการสำหรับอินเทอร์เฟซการเขียนโปรแกรมทั้งหมดอยู่ที่ developer.chrome.com สถานที่หลักที่คุณจะได้รับคำตอบสำหรับคำถามเฉพาะเกี่ยวกับการเขียนโปรแกรมแอปพลิเคชัน Chrome คือ