ฉันจะโหลดส่วนขยาย Chrome ที่ฉันกำลังพัฒนาใหม่อัตโนมัติได้อย่างไร

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

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

คุณสามารถใช้" Extensions Reloader "สำหรับ Chrome:

โหลดส่วนขยายที่ไม่ได้บรรจุทั้งหมดโดยใช้ปุ่มแถบเครื่องมือของส่วนขยายหรือโดยการเรียกดูที่ " http: //reload.extensions "

หากคุณเคยพัฒนาส่วนขยายของ Chrome คุณอาจต้องการทำให้กระบวนการโหลดส่วนขยายที่ไม่ได้บรรจุเสร็จโดยอัตโนมัติโดยไม่ต้องผ่านหน้าส่วนขยาย

"Extensions Reloader" ช่วยให้คุณสามารถโหลดส่วนขยายที่ไม่ได้บรรจุทั้งหมดโดยใช้ 2 วิธี:

1 - ปุ่มแถบเครื่องมือของส่วนขยาย

2 - การเรียกดู " http: //reload.extensions "

ไอคอนแถบเครื่องมือจะโหลดส่วนขยายที่ไม่ได้แพ็คอีกครั้งโดยคลิกเพียงครั้งเดียว

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

ปรับปรุง:ณ วันที่ 14 มกราคม 2015 ขยายเป็นโอเพนซอร์สและสามารถใช้ได้บน GitHub

อัปเดต : ฉันได้เพิ่มหน้าตัวเลือกเพื่อที่คุณจะได้ไม่ต้องค้นหาและแก้ไข ID ของส่วนขยายอีกต่อไป CRXและซอร์สโค้ดอยู่ที่: https://github.com/Rob--W/Chrome-Extension-Reloader
อัปเดต 2: เพิ่มทางลัด (ดูที่เก็บของฉันใน Github)
_{รหัสต้นฉบับซึ่งรวมถึงการทำงานขั้นพื้นฐานที่แสดงด้านล่าง}

สร้างส่วนขยายและใช้วิธีการทำงานของเบราว์เซอร์ร่วมกับchrome.extension.managementAPI เพื่อโหลดส่วนขยายที่ไม่ได้บรรจุของคุณ

รหัสด้านล่างเพิ่มปุ่มลงใน Chrome ซึ่งจะโหลดส่วนขยายอีกครั้งเมื่อคลิก

manifest.json

{
    "name": "Chrome Extension Reloader",
    "version": "1.0",
    "manifest_version": 2,
    "background": {"scripts": ["bg.js"] },
    "browser_action": {
        "default_icon": "icon48.png",
        "default_title": "Reload extension"
    },
    "permissions": ["management"]
}

bg.js

var id = "<extension_id here>";
function reloadExtension(id) {
    chrome.management.setEnabled(id, false, function() {
        chrome.management.setEnabled(id, true);
    });
}
chrome.browserAction.onClicked.addListener(function(tab) {
    reloadExtension(id);
});

icon48.png: เลือกไอคอน 48x48 ที่ดีตัวอย่างเช่น:

ในฟังก์ชั่นหรือเหตุการณ์ใด ๆ

chrome.runtime.reload();

จะโหลดส่วนขยายของคุณอีกครั้ง ( เอกสาร ) คุณต้องเปลี่ยนไฟล์manifest.jsonโดยเพิ่ม:

...
"permissions": [ "management" , ...]
...

ฉันได้สร้างสคริปต์ที่ฝังได้ง่าย ๆ เพื่อทำการโหลดซ้ำแบบร้อน:

https://github.com/xpl/crx-hotreload

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

• ทำงานโดยตรวจสอบการประทับเวลาของไฟล์
• รองรับไดเรกทอรีที่ซ้อนกัน
• ปิดใช้งานตัวเองโดยอัตโนมัติในการกำหนดค่าการผลิต

โซลูชันอื่นคือการสร้างสคริปต์ livereload ที่กำหนดเอง (extension-reload.js):

// Reload client for Chrome Apps & Extensions.
// The reload client has a compatibility with livereload.
// WARNING: only supports reload command.

var LIVERELOAD_HOST = 'localhost:';
var LIVERELOAD_PORT = 35729;
var connection = new WebSocket('ws://' + LIVERELOAD_HOST + LIVERELOAD_PORT + '/livereload');

connection.onerror = function (error) {
  console.log('reload connection got error:', error);
};

connection.onmessage = function (e) {
  if (e.data) {
    var data = JSON.parse(e.data);
    if (data && data.command === 'reload') {
      chrome.runtime.reload();
    }
  }
};

สคริปต์นี้เชื่อมต่อกับเซิร์ฟเวอร์ livereload โดยใช้ websockets จากนั้นจะทำการเรียก chrome.runtime.reload () เมื่อโหลดข้อความจาก livereload ขั้นตอนต่อไปคือการเพิ่มสคริปต์นี้เพื่อเรียกใช้เป็นสคริปต์พื้นหลังใน manifest.json ของคุณและ voila!

หมายเหตุ: นี่ไม่ใช่วิธีแก้ปัญหาของฉัน ฉันแค่โพสต์ไว้ ฉันพบในโค้ดที่สร้างขึ้นของตัวสร้างส่วนขยายของChrome (เครื่องมือที่ยอดเยี่ยม!) ฉันโพสต์สิ่งนี้ที่นี่เพราะมันอาจช่วยได้

ส่วนขยายของ Chrome มีระบบการอนุญาตที่ไม่อนุญาต (บางคนใน SO มีปัญหาเช่นเดียวกับคุณ ) ดังนั้นการขอให้พวกเขา "เพิ่มคุณสมบัตินี้" จะไม่ทำงาน IMO มีจดหมายจาก Chromium Extensions Google Groups ที่ใช้วิธีแก้ปัญหาที่เสนอ (ทฤษฎี)โดยใช้chrome.extension.getViews()แต่ไม่รับประกันว่าจะทำงานได้เช่นกัน

หากเป็นไปได้ที่จะเพิ่มลงในmanifest.jsonหน้าภายในของ Chrome เช่นchrome://extensions/นั้นก็เป็นไปได้ที่จะสร้างปลั๊กอินที่จะโต้ตอบกับReloadจุดยึดและใช้โปรแกรมภายนอกเช่นXRefresh (ปลั๊กอิน Firefox - มีChrome รุ่นที่ใช้ Ruby และ WebSocket ) คุณจะบรรลุสิ่งที่คุณต้องการ:

XRefresh เป็นปลั๊กอินของเบราว์เซอร์ที่จะรีเฟรชหน้าเว็บปัจจุบันเนื่องจากการเปลี่ยนแปลงไฟล์ในโฟลเดอร์ที่เลือก สิ่งนี้ทำให้เป็นไปได้ที่จะทำการแก้ไขหน้าสดด้วยโปรแกรมแก้ไข HTML / CSS ที่คุณโปรดปราน

เป็นไปไม่ได้ที่จะทำ แต่ฉันคิดว่าคุณสามารถใช้แนวคิดเดียวกันนี้ในวิธีที่ต่างออกไป

คุณสามารถลองหาวิธีแก้ปัญหาของบุคคลที่สามแทนได้หลังจากเห็นการแก้ไขในไฟล์ (ฉันไม่รู้ว่า emacs ไม่ใช่ Textmate แต่ใน Emacs มันเป็นไปได้ที่จะผูกการเรียกใช้แอปภายในการกระทำ "บันทึกไฟล์") เพียง คลิกในพิกัดที่เฉพาะเจาะจงของแอปพลิเคชันเฉพาะ: ในกรณีนี้มันเป็นReloadจุดยึดจากส่วนขยายในการพัฒนาของคุณ (คุณเปิดหน้าต่าง Chrome ไว้สำหรับการโหลดซ้ำนี้)

(บ้าเหมือนนรก แต่มันอาจใช้ได้)

นี่คือฟังก์ชันที่คุณสามารถใช้เพื่อดูไฟล์สำหรับการเปลี่ยนแปลงและโหลดซ้ำหากตรวจพบการเปลี่ยนแปลง มันทำงานได้โดยการสำรวจพวกเขาผ่าน AJAX และโหลดซ้ำผ่าน window.location.reload () ฉันคิดว่าคุณไม่ควรใช้สิ่งนี้ในแพ็คเกจการแจกจ่าย

function reloadOnChange(url, checkIntervalMS) {
    if (!window.__watchedFiles) {
        window.__watchedFiles = {};
    }

    (function() {
        var self = arguments.callee;
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (__watchedFiles[url] &&
                    __watchedFiles[url] != xhr.responseText) {
                    window.location.reload();
                } else {
                    __watchedFiles[url] = xhr.responseText
                    window.setTimeout(self, checkIntervalMS || 1000);
                }
            }
        };

        xhr.open("GET", url, true);
        xhr.send();
    })();
}

reloadOnChange(chrome.extension.getURL('/myscript.js'));

บางทีฉันอาจจะสายไปงานเลี้ยง แต่ฉันได้แก้ไขให้ฉันด้วยการสร้างhttps://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln

มันทำงานได้โดยโหลดchrome://extensionsหน้าซ้ำทุกfile.changeครั้งที่มีเหตุการณ์เข้ามาทางเว็บซ็อกเก็ต

ตัวอย่างที่ใช้ Gulp เกี่ยวกับวิธีเปล่งfile.changeเหตุการณ์เมื่อมีการเปลี่ยนแปลงไฟล์ในโฟลเดอร์ส่วนขยายสามารถดูได้ที่นี่: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

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

มีปลั๊กอินโหลดอัตโนมัติหากคุณกำลังพัฒนาโดยใช้ webpack: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');

plugins: [
    new ChromeExtensionReloader()
]

มาพร้อมกับเครื่องมือ CLI หากคุณไม่ต้องการแก้ไข webpack.config.js:

npx wcer

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

ไฟล์เนื้อหาของคุณเช่นไฟล์ html และไฟล์ manifest นั้นไม่สามารถเปลี่ยนแปลงได้หากไม่มีการติดตั้งส่วนขยาย แต่ฉันเชื่อว่าไฟล์ JavaScript จะถูกโหลดแบบไดนามิกจนกว่าส่วนขยายจะได้รับการบรรจุ

ฉันรู้สิ่งนี้เนื่องจากโครงการปัจจุบันกำลังทำงานผ่าน API ส่วนขยายของ Chrome และดูเหมือนว่าจะโหลดทุกครั้งที่ฉันรีเฟรชหน้าเว็บ

อาจจะตอบช้า แต่ฉันคิดว่าcrxreloadอาจเหมาะกับคุณ มันเป็นผลของฉันจากการพยายามมีเวิร์กโฟลว์ที่โหลดซ้ำได้ขณะกำลังพัฒนา

ฉันกำลังใช้ช็อตคัตเพื่อโหลดซ้ำ ฉันไม่ต้องการโหลดซ้ำทุกครั้งเมื่อฉันบันทึกไฟล์

ดังนั้นวิธีการของฉันจึงมีน้ำหนักเบาและคุณสามารถปล่อยให้ฟังก์ชันโหลดซ้ำได้

manifest.json

{
    ...
    "background": {
        "scripts": [
            "src/bg/background.js"
        ],
        "persistent": true
    },
    "commands": {
        "Ctrl+M": {
            "suggested_key": {
                "default": "Ctrl+M",
                "mac": "Command+M"
            },
            "description": "Ctrl+M."
        }
    },
    ...
}

src / BG / background.js

chrome.commands.onCommand.addListener((shortcut) => {
    console.log('lets reload');
    console.log(shortcut);
    if(shortcut.includes("+M")) {
        chrome.runtime.reload();
    }
})

ตอนนี้กด Ctrl + M ในเบราว์เซอร์ chrome เพื่อโหลดซ้ำ

ใช้npm initเพื่อสร้าง package.json ในไดเรกทอรีรากแล้ว

npm install --save-dev gulp-open && npm install -g gulp

จากนั้นสร้าง gulpfile.js

ซึ่งดูเหมือนว่า:

/* File: gulpfile.js */

// grab our gulp packages
var gulp  = require('gulp'),
    open = require('gulp-open');

// create a default task and just log a message
gulp.task('default', ['watch']);

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('extensionData/userCode/**/*.js', ['uri']);
});

gulp.task('uri', function(){
  gulp.src(__filename)
  .pipe(open({uri: "http://reload.extensions"}));
});

สิ่งนี้ใช้ได้ผลกับฉันในการพัฒนาด้วย CrossRider คุณอาจเฝ้าดูเพื่อเปลี่ยนเส้นทางที่คุณดูไฟล์ที่สมมติว่าคุณมีการติดตั้ง npm และโหนด

คำเตือน: ฉันพัฒนาส่วนขยายนี้ด้วยตัวเอง

Clerc - สำหรับไคลเอ็นต์การโหลดซ้ำ Chrome Live Extension

เชื่อมต่อกับเซิร์ฟเวอร์ที่รองรับ LiveReload เพื่อโหลดส่วนขยายของคุณอีกครั้งโดยอัตโนมัติทุกครั้งที่คุณบันทึก

โบนัส: ด้วยการทำงานพิเศษเล็กน้อยในส่วนของคุณคุณสามารถโหลดหน้าเว็บที่ส่วนขยายของคุณเปลี่ยนแปลงโดยอัตโนมัติ

นักพัฒนาหน้าเว็บส่วนใหญ่ใช้ระบบการสร้างที่มีผู้เฝ้าดูบางประเภทที่สร้างไฟล์โดยอัตโนมัติและรีสตาร์ทเซิร์ฟเวอร์และโหลดเว็บไซต์ใหม่

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

gotcha ขนาดใหญ่เพียงอันเดียวคือการเปลี่ยนแปลง manifest.json การพิมพ์ผิดเล็ก ๆ น้อย ๆ ในไฟล์ Manifest อาจทำให้การโหลดซ้ำอีกครั้งและคุณจะติดตั้งการถอนการติดตั้ง / ติดตั้งส่วนขยายอีกครั้งเพื่อให้การเปลี่ยนแปลงของคุณโหลดอีกครั้ง

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

ผู้ยิ่งใหญ่ที่ mozilla เพิ่งเปิดตัวhttps://github.com/mozilla/web-extใหม่ที่คุณสามารถใช้เพื่อเปิดตัวweb-ext run --target chromium

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

(1) ติดตั้ง LiveReload และ Chrome Extension สำหรับแอปพลิเคชันนั้น นี่จะเรียกสคริปต์บางอย่างเกี่ยวกับการเปลี่ยนแปลงไฟล์

(2) เปิด <LiveReloadInstallDir>\Bundled\backend\res\livereload.js

(3) เปลี่ยนบรรทัด#509เป็น

this.window.location.href = "http://reload.extensions";

(4) ตอนนี้ติดตั้งส่วนขยายอื่นExtensions Reloaderที่มีตัวจัดการลิงค์ที่มีประโยชน์ที่โหลดส่วนขยายการพัฒนาทั้งหมดในการนำทาง"http://reload.extensions"

(5) เปลี่ยนส่วนขยายbackground.min.jsด้วยวิธีนี้

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader"))

แทนที่ด้วย

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader")&&(d.name!="LiveReload"))

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

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

เมื่อฉันมีเวลามากขึ้นในการทำสิ่งนี้ฉันอาจจะสร้างส่วนขยายที่ไม่จำเป็นต้องใช้ส่วนขยายทั้งสองนี้

จนถึงตอนนี้ฉันกำลังทำงานกับProjext Axemanของฉัน

เพิ่งค้นพบโครงการใหม่ที่ทำเสียงฮึดฮัดที่ให้ bootstrapping, นั่งร้าน, บางคณะประมวลผลล่วงหน้าอัตโนมัติเช่นเดียวกับการโหลดอัตโนมัติ (ไม่จำเป็นต้องมีปฏิสัมพันธ์)

Bootstrap ส่วนขยาย Chrome ของคุณจาก Websecurify

หากคุณมี Mac, วิธีที่ง่ายที่สุดก็คือแอปอัลเฟรด!

เพียงรับแอพ Alfred ด้วย Powerpackจากนั้นเพิ่มขั้นตอนการทำงานที่ให้ไว้ในลิงก์ด้านล่างและปรับแต่งฮอตคีย์ที่คุณต้องการ (ฉันชอบใช้⌘ + ⌥ + R) นั่นคือทั้งหมดที่

ตอนนี้ทุกครั้งที่คุณใช้ปุ่มลัดGoogle Chromeจะโหลดซ้ำไม่ว่าคุณจะใช้แอปพลิเคชันใดในขณะนั้น

หากคุณต้องการใช้เบราว์เซอร์อื่นให้เปิด AppleScript ในอัลเฟรดเวิร์คโฟลว์และแทนที่ "Google Chrome" ด้วย "Firefox", "Safari", ...

ฉันจะแสดงเนื้อหาของสคริปต์/ usr / bin / osascript ที่ใช้ในไฟล์ ReloadChrome.alfredworkflowเพื่อให้คุณสามารถเห็นสิ่งที่กำลังทำอยู่

tell application "Google Chrome"
  activate
  delay 0.5
  tell application "System Events" to keystroke "r" using command down
  delay 0.5
  tell application "System Events" to keystroke tab using command down
end tell

แฟ้มเวิร์กโฟลว์เป็นReloadChrome.alfredworkflow

ฉันต้องการโหลด (อัปเดต) ส่วนขยายของฉันข้ามคืนนี่คือสิ่งที่ฉันใช้ใน background.js

var d = new Date();
var n = d.getHours();
var untilnight = (n == 0) ? 24*3600000 : (24-n)*3600000; 
// refresh after 24 hours if hour = 0 else
// refresh after 24-n hours (that will always be somewhere between 0 and 1 AM)
setTimeout(function() {
    location.reload();
}, untilnight);

ขอแสดงความนับถือปีเตอร์

ฉันใช้LiveJSเพื่อแยกแยะการโหลดซ้ำของแอพ Packaged เพียงรวมไฟล์ไว้ในแอพของคุณและทุกครั้งที่คุณบันทึกไฟล์แอพจะโหลดอัตโนมัติ

ดังที่กล่าวไว้ในเอกสาร: บรรทัดคำสั่งต่อไปนี้จะโหลดแอปอีกครั้ง

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=[path to the app ]

ดังนั้นฉันเพิ่งสร้างเชลล์สคริปต์และเรียกไฟล์นั้นจากอึก ง่ายสุด ๆ :

var exec = require('child_process').exec;



gulp.task('reload-chrome-build',function(cb){

console.log("reload");

var cmd="./reloadchrome.sh"

exec(cmd,function (err, stdout, stderr) {
    console.log("done: "+stdout);

    cb(err);
    }
);});

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

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

Run("c:\Program Files (x86)\Google\Chrome\Application\chrome.exe")
WinWaitActive("New Tab - Google Chrome")
Send("^l")
Send("chrome://extensions{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}{TAB}{TAB}{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Developer Tools")
Send("^`")

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

ฉันจะเพิ่มสคริปต์ให้เป็นกลุ่มในลักษณะคล้ายกับนี้:

map <leader>A :w<CR>:!{input autoit loader exe here} "{input script location here}"<CR>

ซึ่งหมายความว่าเมื่อฉันอยู่ในกลุ่มฉันกดปุ่มด้านบน ENTER (มักจะรับผิดชอบ: | และ \) เรียกว่าปุ่มผู้นำและตามด้วยตัวพิมพ์ใหญ่ 'A' และจะบันทึกและเริ่มสคริปต์ทดสอบระยะของฉัน

โปรดตรวจสอบให้แน่ใจว่าได้กรอกข้อมูลในส่วน {input ... } ในสคริปต์ Vim / hotkey ด้านบนอย่างเหมาะสม

ผู้แก้ไขหลายคนจะอนุญาตให้คุณทำสิ่งที่คล้ายกับปุ่มลัด

ทางเลือกในการAutoItสามารถพบได้ที่นี่

สำหรับ Windows: AutoHotkey

สำหรับ Linux: xdotool, xbindkeys

สำหรับ Mac: Automator

ฉันพัฒนาใน Firefox เป็นหลัก web-ext runจะโหลดส่วนขยายใหม่โดยอัตโนมัติหลังจากไฟล์เปลี่ยนแปลง จากนั้นเมื่อพร้อมแล้วฉันจะทำการทดสอบรอบสุดท้ายใน Chrome เพื่อให้แน่ใจว่าไม่มีปัญหาใด ๆ ที่ไม่ปรากฏใน Firefox

หากคุณต้องการพัฒนาเป็นหลักใน Chrome แต่ไม่ต้องการติดตั้งส่วนขยายของบุคคลที่สามใด ๆ ตัวเลือกอื่นคือการสร้าง test.htmlไฟล์ในโฟลเดอร์ของส่วนขยายและเพิ่มSSCCE จำนวนมาก ไฟล์นั้นจะใช้ปกติ<script>แท็กเพื่อฉีดสคริปต์ส่วนขยาย

คุณสามารถใช้สิ่งนั้นได้ 95% ของการทดสอบจากนั้นทำการโหลดส่วนขยายอีกครั้งด้วยตนเองเมื่อคุณต้องการทดสอบบนเว็บไซต์จริง

นั่นไม่ได้สร้างสภาพแวดล้อมที่เหมือนกันว่าส่วนขยายทำงานอยู่ แต่ก็ดีพอสำหรับสิ่งง่าย ๆ มากมาย

ผู้เขียนขอแนะนำรุ่นถัดไปของปลั๊กอิน webpack ว่าhttps://github.com/rubenspgcavalcante/webpack-extension-reloader มันใช้งานได้ดีมากสำหรับฉัน

ใช่คุณสามารถทำได้โดยอ้อม! นี่คือทางออกของฉัน

ใน manifest.json

{
    "name": "",
    "version": "1.0.0",
    "description": "",
    "content_scripts":[{
        "run_at":"document_end",
        "matches":["http://*/*"],
        "js":["/scripts/inject.js"]
    }]
}

ใน inject.js

(function() {
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.async = true;
    script.src = 'Your_Scripts';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
})();

สคริปต์ที่ฉีดของคุณสามารถฉีดสคริปต์อื่นจากที่ใดก็ได้

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

เบราว์เซอร์ SYNC

ใช้Browser-Sync ที่น่าทึ่ง

• อัปเดตเบราว์เซอร์ (ใด ๆ ) เมื่อซอร์สโค้ดมีการเปลี่ยนแปลง (HTML, CSS, รูปภาพ ฯลฯ )
• รองรับ Windows, MacOS และ Linux
• คุณสามารถดูการอัปเดตโค้ดของคุณ (สด) โดยใช้อุปกรณ์มือถือของคุณ

การติดตั้งบนMacOS (ดูความช่วยเหลือในการติดตั้งบนระบบปฏิบัติการอื่น)

ติดตั้ง NVM เพื่อให้คุณสามารถลองใช้โหนดใดก็ได้

brew install nvm             # install a Node version manager
nvm ls-remote                # list available Node versions
nvm install v10.13.0         # install one of them
npm install -g browser-sync  # install Browser-Sync

วิธีใช้เบราว์เซอร์ซิงค์สำหรับไซต์แบบคงที่

ลองดูตัวอย่างสองตัวอย่าง:

browser-sync start --server --files . --host YOUR_IP_HERE --port 9000

browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000

--serverตัวเลือกที่ช่วยให้คุณสามารถทำงานได้ทุกเซิร์ฟเวอร์ท้องถิ่นที่คุณอยู่ในขั้วของคุณและ--filesช่วยให้คุณระบุว่าไฟล์จะถูกติดตามสำหรับการเปลี่ยนแปลง ฉันชอบที่จะเจาะจงมากขึ้นสำหรับไฟล์ที่ถูกติดตามดังนั้นในตัวอย่างที่สองฉันใช้ackสำหรับการแสดงรายการนามสกุลไฟล์เฉพาะ (เป็นสิ่งสำคัญที่ไฟล์เหล่านั้นไม่มีชื่อไฟล์ที่มีช่องว่าง) และใช้ipconfigเพื่อค้นหา IP ปัจจุบันของฉันบน MacOS

วิธีใช้เบราว์เซอร์ซิงค์สำหรับเว็บไซต์แบบไดนามิก

ในกรณีที่คุณใช้ PHP, Rails ฯลฯ คุณมีเซิร์ฟเวอร์ที่ใช้งานอยู่แล้ว แต่จะไม่รีเฟรชโดยอัตโนมัติเมื่อคุณทำการเปลี่ยนแปลงรหัสของคุณ ดังนั้นคุณต้องใช้--proxyสวิตช์เพื่อให้เบราว์เซอร์ซิงค์รู้ว่าโฮสต์อยู่ที่ไหนสำหรับเซิร์ฟเวอร์นั้น

browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open

จากตัวอย่างด้านบนฉันมีแอพ Rails ที่ทำงานอยู่ในเบราว์เซอร์ของฉัน 192.168.33.12:3000แล้ว มันทำงานบน VM โดยใช้กล่อง Vagrant แต่ฉันสามารถเข้าถึงเครื่องเสมือนโดยใช้พอร์ต 3000 บนโฮสต์นั้น ฉันชอบที่--no-notifyจะหยุดการซิงค์เบราว์เซอร์ส่งการแจ้งเตือนบนเบราว์เซอร์ทุกครั้งที่ฉันเปลี่ยนรหัสและ--no-openหยุดพฤติกรรมการซิงค์เบราว์เซอร์ที่โหลดแท็บเบราว์เซอร์ทันทีเมื่อเซิร์ฟเวอร์เริ่มทำงาน

สำคัญ:ในกรณีที่คุณใช้ Rails ให้หลีกเลี่ยงการใช้ Turbolinks ในการพัฒนามิฉะนั้นคุณจะไม่สามารถคลิกที่ลิงก์ของคุณได้ในขณะที่ใช้--proxyตัวเลือก

หวังว่ามันจะเป็นประโยชน์กับใครบางคน ฉันได้ลองใช้เคล็ดลับมากมายในการรีเฟรชเบราว์เซอร์ (แม้แต่โพสต์เก่าที่ฉันส่งในคำถาม StackOverflow โดยใช้ AlfredApp ครั้งที่แล้ว) แต่นี่เป็นวิธีที่จะไปจริงๆ ไม่มีแฮ็คอีกต่อไปมันแค่ไหล

เครดิต: เริ่มต้นเซิร์ฟเวอร์เว็บโหลดสดโลคัลด้วยคำสั่งเดียว

ไม่สามารถทำได้โดยตรง ขอโทษ

หากคุณต้องการที่จะเห็นมันเป็นคุณสมบัติที่คุณสามารถขอได้ที่http://crbug.com/new