मैं अपने द्वारा विकसित किए जा रहे Chrome एक्सटेंशन को स्वत: पुनः लोड कैसे करूं?


263

मैं अपने क्रोम एक्सटेंशन के लिए हर बार जब मैं एक्सटेंशन फ़ोल्डर में एक फ़ाइल सहेजता हूं, तो क्रोम: // एक्सटेंशन / में "रीलोड" को स्पष्ट रूप से क्लिक किए बिना करना चाहता हूं। क्या यह संभव है?

संपादित करें: मुझे पता है कि मैं अंतराल को अपडेट कर सकता हूं , जिस पर क्रोम एक्सटेंशन को फिर से लोड करता है, जो एक आधे रास्ते का समाधान है, लेकिन मैं या तो अपने संपादक (एमएसीएस या टेक्स्टमेट) को ट्रिगर कर रहा हूं-पुनः लोड को सहेजना या Chrome को मॉनिटर करने के लिए कहना परिवर्तन के लिए निर्देशिका।


2
यह तेजी से लगता है जब पुनः लोड क्रोम में सक्षम ui से शुरू हो रहा है: // झंडे / # सक्षम- apps-devtool- ऐप
एरिक

मैंने पैक किए गए ऐप्स को फिर से लोड करने के लिए LiveJS की अनुमति दी है। बस अपने ऐप में फ़ाइल को शामिल करें और हर बार जब आप किसी फ़ाइल को सहेजते हैं तो ऐप ऑटोरेलोड करेगा।
ओज रामोस

आपका LiveJS कांटा, @ ओज़ रामोस कहाँ है?
जोश

आह, मैं देखता हूं: आपका "लाइवजेएस" लिंक वास्तव में आपके कांटे से जुड़ा हुआ है, लाइवजेएस के लिए नहीं।
जोश

6
यह पूछे गए प्रश्न का उत्तर नहीं देता है, लेकिन मैं यह उल्लेख करना चाहता हूं कि मैंने यह (या किसी अन्य एक्सटेंशन-लोडिंग-हेल्पर एक्सटेंशन) को बंद कर दिया था क्योंकि मुझे एहसास हुआ कि मैं आसानी से ctrl-R या cmd-R मारकर एक्सटेंशन को पुनः लोड कर सकता हूं ( विस्तार की पृष्ठभूमि विंडो में ओएस पर निर्भर करता है)। मुझे लगता है कि यह मेरे वर्कफ़्लो में मेरे द्वारा की गई किसी भी चीज़ से बेहतर है, और यह एक असंगत स्थिति में होने पर ऑटो-रीलोडिंग की समस्या से भी बचा जाता है।
डॉन हैच

जवाबों:


162

आप क्रोम के लिए " एक्सटेंशन रीलोडर " का उपयोग कर सकते हैं :

एक्सटेंशन के टूलबार बटन का उपयोग करके या " http: //reload.extensions " पर ब्राउज़ करके सभी अनपैक्ड एक्सटेंशन को पुनः लोड करें

यदि आपने कभी क्रोम एक्सटेंशन विकसित किया है, तो हो सकता है कि आप एक्सटेंशन पेज से गुजरने की आवश्यकता के बिना अपने अनपैक्ड एक्सटेंशन को फिर से लोड करने की प्रक्रिया को स्वचालित करना चाहते हों।

"एक्सटेंशन रीलोडर" आपको 2 तरीकों का उपयोग करके सभी अनपैक्ड एक्सटेंशन को फिर से लोड करने की अनुमति देता है:

1 - एक्सटेंशन का टूलबार बटन।

2 - " http: //reload.extensions " पर ब्राउज़ करना ।

टूलबार आइकन एक क्लिक का उपयोग करके अनपैक्ड एक्सटेंशन को फिर से लोड करेगा।

"ब्राउज़िंग द्वारा पुनः लोड करना" "पोस्ट बिल्ड" स्क्रिप्ट का उपयोग करके पुनः लोड प्रक्रिया को स्वचालित करने के लिए है - बस अपनी स्क्रिप्ट में क्रोम का उपयोग करके " http: //reload.extensions " के लिए एक ब्राउज़ जोड़ें , और आपके पास एक ताज़ा क्रोम विंडो होगी।

अपडेट: 14 जनवरी 2015 तक, विस्तार खुला-खट्टा है और गिटहब पर उपलब्ध है


3
यह अब तक का सबसे अच्छा समाधान है, लेकिन यह अभी भी एक्सटेंशन को अपडेट करना आसान नहीं बनाता है जब भी मैं इसका उपयोग करने वाली फ़ाइल को संशोधित करता हूं, जो कि मैं आदर्श रूप से देख रहा था।
एंड्री फेडोरोव

2
धन्यवाद। उल्लेख करना चाहता था कि मैं PhpStorm का उपयोग करता हूं और मैंने एक टूलबार बटन जोड़ा है जो "reload.extensions" url के साथ chrome.exe कहता है। जब भी मैं कोड का परीक्षण करना चाहता हूं, मैं उस बटन और क्रोम पॉपअप को अपडेट किए गए एडऑन के साथ दबा देता हूं।
एरियल

30
Woaw, मैं सिर्फ पाने में कामयाब रहे gruntjs का उपयोग करके इस प्लगइन के साथ काम करने के लिए घुरघुराना से खोलने को खोलने के लिए http://reload.extensionsजब एक फ़ाइल को संशोधित हो जाता है। अब यह लीवरेलैड की तरह ही कार्य करता है, लेकिन हर बार जब मैं निर्दिष्ट प्लगइन फाइलों में से एक को संशोधित करता हूं तो एनोयिंग क्रोम विंडो खुलती है: पी। धन्यवाद!
गेबलरॉक्स

1
@GabLeRoux मैं यहाँ सिर्फ यह जानने के लिए आया था कि कोई पहले से ही ऐसा करता है। यह एक सम्मोहन की तरह काम करता है।
15-13 बजे polkovnikov.ph

1
@AlexanderMills दुख की बात है मैं हर बार एक नया टैब खोलने के बिना ऐसा करने में सक्षम नहीं था। अगर आपको कोई बेहतर उपाय मिल जाए। कम से कम, एक github.com/arikw/chrome-extensions-reloader
GabLeRoux

58

अद्यतन : मैंने एक विकल्प पृष्ठ जोड़ा है, ताकि आपको एक्सटेंशन की आईडी को मैन्युअल रूप से ढूंढना और संपादित न करना पड़े। CRX और स्रोत कोड इस प्रकार हैं: https://github.com/Rob--W/Chrome-Extension-Reloader
अपडेट 2: जोड़ा गया शॉर्टकट (गितुब पर मेरा भंडार देखें)।
मूल कोड, जिसमें मूल कार्यक्षमता शामिल है, नीचे दिखाया गया है


एक एक्सटेंशन बनाएं, और अपने अनपैक्ड एक्सटेंशन को फिर से लोड करने के लिए एपीआई के साथ संयोजन में ब्राउज़र एक्शन विधि का उपयोग chrome.extension.managementकरें।

नीचे दिया गया कोड 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 आइकन चुनें:
गूगल क्रोम गूगल क्रोम


1
@trusktr स्कॉट का जवाब केवल पृष्ठभूमि पृष्ठ को पुनः लोड करता है। हालाँकि, दोनों उत्तर संयोजित किए जा सकते हैं (स्कॉट्स उत्तर + सहायक एक्सटेंशन), ​​ताकि किसी एक्सटेंशन की फ़ाइल में परिवर्तन होने पर एक एक्सटेंशन स्वचालित रूप से पुनः लोड हो। हालांकि, मैं इस प्रथा के खिलाफ सिफारिश करता हूं, क्योंकि एक्सटेंशन रीलोड पर देवटल्स बंद हैं। मैं अक्सर एक टेस्ट एक्सटेंशन के साथ फिडेल करता हूं, और अक्सर अपने परिवर्तनों को सहेजता हूं, तब भी जब सिंटैक्स अधूरा होता है। यदि मेरा वास्तविक ऑटो-रीलोड सक्षम हो जाता है, तो यह मेरे एक्सटेंशन को क्रैश कर देगा।
रॉब डब्ल्यू

@RobW अच्छी बात है। मैं अक्सर कोड लिखने के बीच में बचत करता हूं इसलिए कोड निश्चित रूप से प्रश्न में प्लगइन को तोड़ देगा।
त्रिकूट

1
@ सुदर्शन आपने उपयोग करने का सुझाव दियाchrome.i18n.getMessage("@@extension_id") । यह, हालांकि, वर्तमान एक्सटेंशन के एक्सटेंशनआईडी को लौटाता है , जो उपयोगी नहीं है क्योंकि एक एक्सटेंशन managementएपीआई का उपयोग करके खुद को फिर से लोड नहीं कर सकता है (अक्षम होने के बाद, उसे फिर से एक्सटेंशन को सक्षम करने का मौका नहीं है)।
रोब डब्ल्यू

40

किसी भी समारोह या कार्यक्रम में

chrome.runtime.reload();

आपके एक्सटेंशन ( डॉक्स ) को पुनः लोड करेगा । आपको मैनिफ़ेस्ट .json फ़ाइल बदलने की भी ज़रूरत है :

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

मेरे लिए इस समाधान ने केवल तभी काम किया, जब मैंने index.html में स्क्रिप्ट में chrome.runtime.reload () लिखा था, जहाँ इस प्रकार की मैनिफ़ेस्ट फ़ाइल में निर्दिष्ट किया गया है: ** "बैकग्राउंड": {"पेज": "इंडेक्स"। html ", **। मेरे content_script js फ़ाइल में, मैं इस फ़ंक्शन तक नहीं पहुँच सका। मेरा मानना ​​है कि, यह सुरक्षा के लिए है।
टाइटसफैक्स

आपकी सामग्री स्क्रिप्ट क्रोम API से बात नहीं कर सकती है। उस काम के लिए आपको संदेशों
marcelocra

जब आप फोन करते हैं chrome.runtime.reload(), तो वास्तव में क्या होता है? कई पृष्ठ / टैब ताज़ा करते हैं?
अलेक्जेंडर मिल्स

5
मुझे लगता है कि हमें chrome.runtime.reload()बैकग्राउंड स्क्रिप्ट से कॉल करना चाहिए
अलेक्जेंडर मिल्स

मेरे लिए काम किया। धन्यवाद
MikeMurko

39

मैंने हॉट रीलोड करने के लिए एक सरल एम्बेड करने योग्य स्क्रिप्ट बनाई है:

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

यह एक्सटेंशन की डायरेक्टरी में फाइल में बदलाव के लिए देखता है। जब एक परिवर्तन का पता लगाया जाता है, तो यह विस्तार को फिर से लोड करता है और सक्रिय टैब (अद्यतन सामग्री स्क्रिप्ट को फिर से ट्रिगर करने के लिए) को ताज़ा करता है।

  • फ़ाइलों की टाइमस्टैम्प की जाँच करके काम करता है
  • नेस्टेड निर्देशिकाओं का समर्थन करता है
  • स्वचालित रूप से उत्पादन विन्यास में खुद को निष्क्रिय कर देता है

3
यदि आप "गुल स्वाद" समाधान की तलाश कर रहे हैं, तो यह है।
उल्लू

1
बढ़िया काम किया। क्या आपने npm पैकेज बनाने पर विचार किया है?
18

@pixelearth हाँ, क्यों नहीं। हम्म, लेकिन तब उपयोग का मामला क्या होगा? आप npm install crx-hotreloadविस्तार की निर्देशिका में हैं, और फिर स्क्रिप्ट का संदर्भ लें "scripts": ["./node_modules/crx-hotreload/hot-reload.js"]? अगर मैं गलत हूं तो मुझे सुधारो।
विटाली गॉर्डन

1
@MilfordCubicle मैं एक ऐसी वस्तु का निर्यात करने का सुझाव दूंगा जिसकी एक विधि है जिसे आप अपनी पृष्ठभूमि में कॉल कर सकते हैं। js फ़ाइल। तो कुछ import reloader from 'hot-reload'फिर स्क्रिप्ट reloader.check () में
pixelearth

3
उत्तर को अधिक उत्थान की आवश्यकता है। वेबपैक के साथ संयोजन के --watchरूप में अच्छी तरह से काम करता है , क्योंकि आप इसे केवल अपने बिल्ड फ़ोल्डर में रख सकते हैं ताकि बिल्ड प्रक्रिया समाप्त होने के बाद ही यह अपडेट हो। कोई जटिल वेबपैक कमांड बिल्ड प्लग-इन नहीं करता है।
वी। रुबिनेटी

10

एक अन्य समाधान कस्टम लिवरेलॉड स्क्रिप्ट (एक्सटेंशन-रीलोड.जेएस) बनाने के लिए होगा:

// 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();
    }
  }
};

यह स्क्रिप्ट websockets का उपयोग करके लिवरेलड सर्वर से जुड़ती है। उसके बाद, यह chrome.runtime.reload () कॉल को लिलोडेलड से पुनः लोड संदेश पर जारी करेगा। अगला कदम इस स्क्रिप्ट को अपने मेनिफेस्टों में पृष्ठभूमि स्क्रिप्ट के रूप में चलाने के लिए जोड़ना होगा।

नोट: यह मेरा समाधान नहीं है। मैं अभी इसे पोस्ट कर रहा हूं। मैंने इसे क्रोम एक्सटेंशन जनरेटर (ग्रेट टूल!) के उत्पन्न कोड में पाया । मैं इसे यहाँ पोस्ट कर रहा हूँ क्योंकि यह मदद कर सकता है।


9

क्रोम एक्सटेंशन्स की एक अनुमति प्रणाली है कि यह इसे अनुमति नहीं देगा (SO में कुछ लोगों को आपके जैसी ही समस्या थी ), इसलिए उन्हें "इस सुविधा को जोड़ने" का अनुरोध करना IMO के काम नहीं आने वाला है। क्रोमियम एक्सटेंशन्स से एक मेल है जिसका उपयोग प्रस्तावित समाधान (सिद्धांत) के साथ Google समूह करता है chrome.extension.getViews(), लेकिन काम करने की गारंटी नहीं है।

यदि manifest.jsonकुछ क्रोम आंतरिक पृष्ठों को जोड़ना संभव था chrome://extensions/, तो एक प्लगइन बनाना संभव होगा Reload, जो एंकर के साथ बातचीत करेगा , और, एक्सफ़्रेश (फ़ायरफ़ॉक्स प्लगिन जैसे बाहरी प्रोग्राम का उपयोग करके - रूबी और वेबसॉकेट का उपयोग करके क्रोम संस्करण है। ), आपको वही मिलेगा जो आपको चाहिए:

XRefresh एक ब्राउज़र प्लगइन है जो चयनित फ़ोल्डरों में फ़ाइल परिवर्तन के कारण वर्तमान वेब पेज को रीफ्रेश करेगा। यह आपके पसंदीदा HTML / CSS संपादक के साथ लाइव पेज संपादन करना संभव बनाता है।

यह करना संभव नहीं है, लेकिन मुझे लगता है कि आप इसी अवधारणा को एक अलग तरीके से उपयोग कर सकते हैं।

आप इसके बजाय तृतीय-पक्ष समाधान खोजने का प्रयास कर सकते हैं, एक फ़ाइल में संशोधन देखने के बाद (मुझे नहीं पता Emacs न तो Textmate, लेकिन Emacs में "फ़ाइल सहेजें" कार्रवाई के भीतर एक ऐप कॉल को बांधना संभव होगा), बस किसी विशिष्ट एप्लिकेशन के विशिष्ट समन्वय में क्लिक: इस मामले में यह Reloadविकास में आपके विस्तार से लंगर है (आप इस पुनः लोड के लिए खोले गए क्रोम विंडोज को छोड़ दें)।

(नरक के रूप में पागल लेकिन यह काम कर सकता है)


7

यहां एक फ़ंक्शन है जिसे आप परिवर्तनों के लिए फ़ाइलों को देखने के लिए उपयोग कर सकते हैं, और यदि परिवर्तनों का पता लगाया जाता है तो फिर से लोड करें। यह उन्हें 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'));

कर सकते हैं, जोड़: reloadOnChange (chrome.extension.getURL ('/ मैनिफ़ेस्ट.जॉन'));
स्कॉट

मैंने pastebin.com/mXbSPkeu की कोशिश की है , लेकिन विस्तार अपडेट नहीं किया गया है (प्रकट प्रविष्टियाँ, सामग्री स्क्रिप्ट, ब्राउज़र कार्रवाई) (Ubuntu 11.10, क्रोम 18)। केवल अद्यतन फ़ाइल पृष्ठभूमि पृष्ठ (बदला है console.logसंदेशों दिखाई है)।
रोब डब्ल्यू

"परिवर्तनों के लिए फ़ाइलें देखें, और यदि परिवर्तनों का पता लगाया जाए तो पुनः लोड करें।" मेरे जीवन के लिए मैं यह नहीं देख सकता कि यह कैसे पता चलेगा कि एक फ़ाइल बदल गई है? कृपया मुझे समझने में मदद करें क्योंकि यह भयानक लगता है!
जेसनडेविस

oo अब मैं देख रहा हूं, यह फाइलों की सामग्री की एक प्रति संग्रहीत कर रहा है और कैश संस्करण की तुलना अजाक्स लाइव संस्करण के साथ कर रहा है .... चतुर!
जेसनडेविस

6

हो सकता है कि मुझे पार्टी में थोड़ी देर हो गई है, लेकिन मैंने इसे https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemkjbbamln बनाकर मेरे लिए हल कर दिया है

यह chrome://extensionsपृष्ठ को फिर से लोड करके काम करता है , जब भी file.changeवेबसैट के माध्यम से घटनाएँ आ रही हैं।

file.changeएक्सटेंशन फ़ोल्डर में फ़ाइल परिवर्तनों पर ईवेंट को कैसे उत्सर्जित किया जाए, इसका एक गुल-आधारित उदाहरण यहां पाया जा सकता है: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

एक्सटेंशन को पुनः लोड / पुनः-सक्षम करने के लिए केवल एक्सटेंशन प्रबंधन एपीआई का उपयोग करने के बजाय पूरे टैब को पुनः लोड क्यों किया जा रहा है? वर्तमान में एक्सटेंशन को अक्षम करने और सक्षम करने से फिर से किसी भी खुले निरीक्षण विंडो (कंसोल लॉग आदि) को बंद करने का कारण बनता है, जिसे मैंने सक्रिय विकास के दौरान बहुत कष्टप्रद पाया।


अच्छा! मैं देख रहा हूं कि आपके पास नए अपग्रेड किए गए रीलोड () फ़ंक्शन के लिए पीआर है।
कैसरसोल 11

4

यदि आप वेबपैक का उपयोग कर विकसित कर रहे हैं तो एक स्वचालित रीलोड प्लगइन है: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

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

plugins: [
    new ChromeExtensionReloader()
]

यदि आप webpack.config.js को संशोधित नहीं करना चाहते हैं तो एक CLI टूल भी आता है:

npx wcer

नोट: एक (खाली) पृष्ठभूमि स्क्रिप्ट की आवश्यकता है भले ही आपको इसकी आवश्यकता न हो क्योंकि यह वह जगह है जहां यह पुनः लोड कोड इंजेक्ट करता है।


पहले से ही संग्रहीत :( github.com/rubenspgcavalcante/webpack-extension-reloader की ओर इशारा करते हुए जो कि पार ब्राउज़र है, और अभी भी सक्रिय विकास में है, हालांकि :)
con--

3

आपकी सामग्री फ़ाइलों में html और प्रकट फाइलें एक्सटेंशन की स्थापना के बिना परिवर्तनशील नहीं हैं, लेकिन मेरा मानना ​​है कि जब तक एक्सटेंशन पैक नहीं किया गया है, तब तक जावास्क्रिप्ट फाइलें गतिशील रूप से भरी हुई हैं।

मुझे यह पता है कि क्रोम एक्सटेंशन्स एपीआई के माध्यम से काम करने वाली एक वर्तमान परियोजना के कारण, और जब भी मैं किसी पृष्ठ को ताज़ा करता हूं, तो हर बार लोड होता है।


मुझे नहीं पता कि आप किस संस्करण का उपयोग कर रहे थे, लेकिन 16.0.912.63 मीटर के रूप में, क्रोम सभी फ़ाइलों को स्वचालित रूप से पुनः लोड करता है। सिवाय प्रकट के।
१५:०६ पर जेकज

@Zequez: फाइलें मेरे लिए फिर से लोड नहीं की गई हैं। :(
रैंडमब्लू

तुम सही हो। मैं विकल्प पृष्ठ विकसित कर रहा था, जो स्क्रिप्ट को दस्तावेज़ के साथ कॉल करता है, और इसलिए उन्हें पुनः लोड कर रहा है।
सामग्री_

3

शायद थोड़ा देर से जवाब लेकिन मुझे लगता है कि crxreload आपके लिए काम कर सकता है। यह विकास करते समय पुनः लोड-बचाने के लिए वर्कफ़्लो करने की कोशिश करने का मेरा परिणाम है।


3

मैं पुनः लोड करने के लिए एक शॉर्टकट का उपयोग कर रहा हूं। जब मैं किसी फ़ाइल को सहेजता हूं तो मैं हर समय लोड नहीं करना चाहता

तो मेरा दृष्टिकोण हल्का है, और आप पुनः लोड फ़ंक्शन को अंदर छोड़ सकते हैं

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 दबाएं


आप ब्राउज़र में पुनः लोड फ़ंक्शन का उपयोग भी कर सकते हैं ताकि यह बटन क्लिक पर पुनः लोड हो जाए। stackoverflow.com/questions/30427908/…
शक्ति

हाँ, आप chrome.runtime.reload () हर लोड कर सकते हैं। मैं उपयोग करता हूं: संपादक> ctrl + s> alt + tab> ctrl + m। बैकग्राउंड होने..जैसे सांत्वना खुली। अपनी तेजी से, एक माउस का उपयोग किए बिना
जोहान Hoeksma

2

npm initएक पैकेज बनाने के लिए उपयोग करें । निर्देशिका में रूट करें, फिर

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 और नोड स्थापित है।


2

डिस्क्लेमर: मैंने खुद इस एक्सटेंशन को विकसित किया है।

क्लर्क - क्रोम लाइव एक्सटेंशन रिओडिंग क्लाइंट के लिए

अपने एक्सटेंशन को हर बार सहेजने के लिए स्वचालित रूप से पुनः लोड करने के लिए LiveReload संगत सर्वर से कनेक्ट करें।

बोनस: अपने हिस्से पर थोड़े अतिरिक्त काम के साथ, आप उन वेबपृष्ठों को स्वचालित रूप से पुनः लोड कर सकते हैं जो आपके एक्सटेंशन को बदल देते हैं।

अधिकांश वेबपेज डेवलपर्स कुछ प्रकार के वॉचर के साथ एक बिल्ड सिस्टम का उपयोग करते हैं जो स्वचालित रूप से अपनी फ़ाइलों का निर्माण करता है और अपने सर्वर को पुनरारंभ करता है और वेबसाइट को फिर से लोड करता है।

एक्सटेंशन को विकसित करने के लिए अलग होना चाहिए। क्लर्क क्रोम देवों के लिए यही ऑटोमेशन लाता है। एक LiveReload सर्वर के साथ एक बिल्ड सिस्टम सेट करें, और क्लार्क आपके एक्सटेंशन को रीफ्रेश करने के लिए पुनः लोड घटनाओं के लिए सुनेंगे।

एकमात्र बड़ा गोचर मेनिफेस्ट्स में बदल जाता है। मैनिफ़ेस्ट में कोई भी छोटा टाइपो शायद आगे के पुनः प्रयास को विफल करने का कारण बनेगा, और आप अपने परिवर्तनों को फिर से लोड करने के लिए अपने एक्सटेंशन को अनइंस्टॉल करने / पुनः इंस्टॉल करने पर अड़े रहेंगे।

फिर से लोड करने के बाद क्लार्क आपके एक्सटेंशन पर पूर्ण पुनः लोड संदेश भेजता है, इसलिए आप वैकल्पिक रूप से प्रदान किए गए संदेश का उपयोग आगे ताज़ा चरणों को ट्रिगर करने के लिए कर सकते हैं।


2

मोज़िला के महान लोगों ने अभी एक नया https://github.com/mozilla/web-ext जारी किया जिसका उपयोग आप लॉन्च करने के लिए कर सकते हैंweb-ext run --target chromium


1

@GmonC और @Arik और कुछ खाली समय के लिए धन्यवाद, मैं इस काम को करने के लिए तैयार हूं। मुझे इस काम को करने के लिए दो फाइलों को बदलना पड़ा है।

(1) उस एप्लिकेशन के लिए LiveReload और Chrome एक्सटेंशन इंस्टॉल करें। यह फ़ाइल परिवर्तन पर कुछ स्क्रिप्ट को कॉल करेगा।

(२) खोलना <LiveReloadInstallDir>\Bundled\backend\res\livereload.js

(३) लाइन #509को बदल दें

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

(4) अब एक और एक्सटेंशन स्थापित करें Extensions Reloaderजिसमें उपयोगी लिंक हैंडलर है जो नेविगेट करने पर सभी विकास एक्सटेंशन को फिर से लोड करता है"http://reload.extensions"

(५) अब 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 reload, image reload आदि) से अन्य सभी अच्छाइयों का उपयोग करते हुए प्रत्येक फ़ाइल परिवर्तन पर पृष्ठ और एक्सटेंशन पुनः लोड करेंगे।

इसके बारे में केवल बुरी बात यह है कि आपको प्रत्येक एक्सटेंशन अपडेट पर स्क्रिप्ट बदलने की प्रक्रिया को दोहराना होगा। अपडेट से बचने के लिए, एक्सटेंशन को अनपैक्ड के रूप में जोड़ें।

जब मेरे पास इसके साथ गड़बड़ करने के लिए अधिक समय होगा, तो मैं संभवतः एक्सटेंशन बनाऊंगा जो इन दोनों एक्सटेंशन की आवश्यकता को समाप्त करता है।

तो, मैं अपने विस्तार पर काम कर रहा हूँ तक Projext Axeman


1

बस एक नया ग्रंट आधारित प्रोजेक्ट मिला जो बूटस्ट्रैपिंग, मचान, कुछ स्वचालित प्री-प्रोसेसिंग फैकल्टी, साथ ही ऑटो-रीलोडिंग (कोई इंटरैक्शन की आवश्यकता नहीं) प्रदान करता है।

Websecurify से आपका Chrome एक्सटेंशन बूटस्ट्रैप


1

यदि आपके पास एक मैक है, तो अल्फ्रेड ऐप के साथ सबसे आसान तरीका है!

बस पावरपैक के साथ अल्फ्रेड ऐप प्राप्त करें , फिर नीचे दिए गए लिंक में दिए गए वर्कफ़्लो को जोड़ें और इच्छित हॉटकी को अनुकूलित करें (मुझे ⌥ + ⌘ + R का उपयोग करना पसंद है)। बस इतना ही।

अब, जब भी आप हॉटकी का उपयोग करते हैं, तो हर बार Google Chrome पुनः लोड होगा, चाहे आप उस समय कोई भी एप्लिकेशन क्यों न हों।

यदि आप अन्य ब्राउज़र का उपयोग करना चाहते हैं, तो अल्फ्रेड प्राथमिकताएँ वर्कफ़्लोज़ के अंदर AppleScript खोलें और "फ़ायरफ़ॉक्स", "सफारी", ... के साथ "Google Chrome" बदलें।

मैं यहाँ / 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 है


1

मैं रातोंरात अपने एक्सटेंशन को फिर से लोड (अपडेट) करना चाहता हूं, यही वह है जो मैं बैकग्राउंड में उपयोग करता हूं। जेएस:

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);

सादर, पीटर


0

मैंने पैक किए गए ऐप्स को फिर से लोड करने के लिए LiveJS की अनुमति दी है। बस अपने ऐप में फ़ाइल को शामिल करें और हर बार जब आप किसी फ़ाइल को सहेजते हैं तो ऐप ऑटोरेलोड करेगा।


0

डॉक्स में बताया गया है: निम्न कमांड लाइन एक ऐप को फिर से लोड करेगी

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

इसलिए मैंने सिर्फ एक शेल स्क्रिप्ट बनाई और उस फाइल को gulp से कॉल किया। सुपर सरल:

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);
    }
);});

स्क्रिप्ट पर अपनी आवश्यक वॉच कमांड चलाएं और जब आप चाहें तब पुनः लोड कार्य को कॉल करें। साफ, सरल।


0

यह वह जगह है जहाँ 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("^`")

जाहिर है आप अपने परीक्षण / जरूरतों के अनुरूप होने के लिए कोड बदलते हैं। सुनिश्चित करें कि एंकर टैग क्रोम: // एक्‍सटेंशन साइट में जहां है वहां टैब क्लिक सही है। आप विंडो माउस आंदोलनों और ऐसे अन्य मैक्रो के सापेक्ष भी उपयोग कर सकते हैं।

मैं इस तरह से स्क्रिप्ट को विम में जोड़ूंगा:

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

इसका मतलब यह है कि जब मैं विम में होता हूं तो ENTER के ऊपर का बटन दबाता हूं (आमतौर पर इसके लिए जिम्मेदार होता है: | और \) को नेता बटन के रूप में जाना जाता है और इसे राजधानी 'ए' के ​​साथ फॉलो किया जाता है और यह मेरी परीक्षण चरण स्क्रिप्ट को सहेजता है और शुरू होता है।

कृपया उपरोक्त Vim / hotkey script में {इनपुट ...} अनुभागों को उचित रूप से भरना सुनिश्चित करें।

कई संपादक आपको हॉटकी के साथ कुछ ऐसा ही करने की अनुमति देंगे।

AutoIt के विकल्प यहां देखे जा सकते हैं

विंडोज के लिए: ऑटोहॉटकी

लिनक्स के लिए: xdotool, xbindkeys

मैक के लिए: ऑटोमेटर


0

मैं मुख्य रूप से फ़ायरफ़ॉक्स में विकसित करता हूं, जहां web-ext runफाइलें बदलने के बाद स्वचालित रूप से एक्सटेंशन को फिर से लोड किया जाता है। एक बार जब यह तैयार हो जाता है, तो मैं यह सुनिश्चित करने के लिए क्रोम में परीक्षण का एक अंतिम दौर करता हूं कि फ़ायरफ़ॉक्स में कोई समस्या नहीं थी।

यदि आप मुख्य रूप से क्रोम में विकसित करना चाहते हैं, हालांकि, और किसी भी 3 पार्टी एक्सटेंशन को स्थापित नहीं करना चाहते हैं, तो दूसरा विकल्प test.htmlएक्सटेंशन के फ़ोल्डर में एक फ़ाइल बनाना है , और इसमें एसएससीसीई का एक गुच्छा जोड़ना है। फिर वह फाइल <script>एक्सटेंशन स्क्रिप्ट को इंजेक्ट करने के लिए एक सामान्य टैग का उपयोग करती है।

आप परीक्षण के 95% के लिए इसका उपयोग कर सकते हैं, और तब मैन्युअल रूप से विस्तार को फिर से लोड कर सकते हैं जब आप इसे लाइव साइटों पर परीक्षण करना चाहते हैं।

यह उस पर्यावरण की पहचान नहीं करता है जो एक विस्तार में चलता है, लेकिन यह कई सरल चीजों के लिए पर्याप्त है।



-1

हाँ, आप इसे अप्रत्यक्ष रूप से कर सकते हैं! यहाँ मेरा समाधान है।

प्रकट में। Json

{
    "name": "",
    "version": "1.0.0",
    "description": "",
    "content_scripts":[{
        "run_at":"document_end",
        "matches":["http://*/*"],
        "js":["/scripts/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);
})();

आपकी इंजेक्ट की गई स्क्रिप्ट किसी भी स्थान से अन्य स्क्रिप्ट को इंजेक्ट कर सकती है।

इस टेक्निक से एक और फायदा यह है कि आप अलग-थलग दुनिया की सीमा को नजरअंदाज कर सकते हैं । देख सामग्री स्क्रिप्ट निष्पादन वातावरण


मेरे लिए काम नहीं कर रहा है? यदि मैं script.src = 'foo.js' को आज़माता हूं, तो यह वर्तमान वेबसाइट के सापेक्ष url के लिए दिखता है। अगर मैं पूरा रास्ता आज़माता हूँ: मुझे स्थानीय संसाधन लोड करने की अनुमति नहीं है: 'फ़ाइल: ///../foo.js'
जेसी एल्ड्रिज

-2

ब्राउज़र-समन्वयन

अद्भुत ब्राउज़र-सिंक का उपयोग करना

  • स्रोत कोड बदलने पर ब्राउज़र (कोई भी) अपडेट करें (HTML, CSS, चित्र आदि)
  • समर्थन विंडोज, मैकओएस और लिनक्स
  • आप अपने मोबाइल उपकरणों का उपयोग करके अपने कोड अपडेट (लाइव) भी देख सकते हैं

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मैकओएस पर मेरे वर्तमान आईपी को खोजने के लिए भी उपयोग करें।

गतिशील साइटों के लिए ब्राउज़र-सिंक का उपयोग कैसे करें

यदि आप PHP, रेल्स आदि का उपयोग कर रहे हैं, तो आपके पास पहले से ही एक सर्वर चल रहा है, लेकिन जब आप अपने कोड में बदलाव करते हैं तो यह स्वचालित रूप से ताज़ा नहीं होता है। तो आपको --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

उपरोक्त उदाहरण में, मेरे पास पहले से ही अपने ब्राउज़र पर एक रेल एप्लिकेशन चल रहा है 192.168.33.12:3000। यह वास्तव में एक Vagrant बॉक्स का उपयोग करके VM पर चलता है, लेकिन मैं उस होस्ट पर पोर्ट 3000 का उपयोग करके वर्चुअल मशीन तक पहुंच सकता हूं। मुझे --no-notifyहर बार जब मैं अपना कोड बदलता हूं और हर बार --no-openसर्वर शुरू होने पर ब्राउज़र टैब को लोड करने वाले ब्राउज़र-सिंक व्यवहार को रोकने के लिए ब्राउज़र पर मुझे एक अलर्ट अलर्ट भेजना पसंद करता हूं ।

महत्वपूर्ण: यदि आप रेल का उपयोग कर रहे हैं, तो केवल विकास पर टर्बोलिंक्स का उपयोग करने से बचें, अन्यथा आप --proxyविकल्प का उपयोग करते समय अपने लिंक पर क्लिक नहीं कर पाएंगे ।

आशा है कि यह किसी के लिए उपयोगी होगा। मैंने ब्राउज़र को रीफ़्रेश करने के लिए कई तरकीबें आज़माई हैं (यहां तक ​​कि एक पुराना पोस्ट जो मैंने इस StackOverflow सवाल पर अल्फ्रेडएप का उपयोग करके पहले किया था), लेकिन यह वास्तव में जाने का तरीका है; कोई और अधिक हैक, यह सिर्फ बहती है।

क्रेडिट: एक कमांड के साथ एक स्थानीय लाइव रीलोड वेब सर्वर शुरू करें


-4

यह सीधे नहीं किया जा सकता है। माफ़ करना।

यदि आप इसे एक सुविधा के रूप में देखना चाहते हैं, तो आप इसे http://crbug.com/new पर अनुरोध कर सकते हैं


1
यह किया जा सकता है, यह एक उचित जवाब नहीं है। बस दूसरे उत्तरों पर एक नज़र डालें और वे आपको बताएंगे।
ICANKindOfCode 11:18
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.