alunny / ChildBrowser

cross-platform ChildBrowser plugin for PhoneGap/Cordova
104 stars 134 forks source link

Cordova 2.2 - CDVPlugin class childbrowser.js (pluginName: ChildBrowser) does not exist. #28

Closed jbatchelor closed 11 years ago

jbatchelor commented 11 years ago

This will be Day 2 of trying to get this thing to work. First off, I have to say that the instructions for installation of this plugin are scattered all over the place. It would be nice if the developer would kindly consolidate and give us an official installation procedure guide that is reproducible 100% of the time.

I have tried creating a Cordova project per the Cordova guide (go to the ios/bin folder, ./create, etc), and launching the Cordova app doesn't seem to be at issue, here. However, I have tried following what scattered instructions I could find, and this is what I /think/ the procedure is supposed to be:

  1. Open your XCode project.
  2. Drag and drop all the library files from the ChildBrowser-master/src/ios folder onto the Plugins folder of your XCode project's structure.
  3. Check the "Copy items into destination group's folder (if needed)" box, and leave Create folder references for any added folders" selected by default, and click Finish.
  4. To the Cordova.plist file, under the ExternalHosts item, add a url to whitelist (in this case *)
  5. To the Cordova.plist file, under Plugins, add two items: * ChildBrowser (string) childbrowser.js * ChildBrowserCommand (string) ChildBrowserCommand
  6. Add to your index.html file a script reference to childbrowser.js, after your script include of cordova.
  7. Copy (in the Finder) childbrowser.js from the ChildBrowser-master/www folder to the www folder of your project.
  8. Add a link to your index.html file. In my case, for testing purposes, I added <a href="#" id="btnTest">Test Link</a>
  9. In the js/index.js file that comes from the base ./create of the project, I added:
onDeviceReady: function() {
        app.receivedEvent('deviceready');
        var link = document.getElementById("btnTest");
        link.addEventListener('click', function() {
                console.log('Link clicked!');
                window.plugins.childBrowser.openExternal('http://www.apple.com');
                });
        },

I Run the Emulator, and I can see that the click event is being hit, in the console. However, after that, I get the following errors:

2012-11-20 10:02:58.114 testCB21[5047:c07] CDVPlugin class childbrowser.js (pluginName: ChildBrowser) does not exist.
2012-11-20 10:02:58.115 testCB21[5047:c07] ERROR: Plugin 'ChildBrowser' not found, or is not a CDVPlugin. Check your plugin mapping in Cordova.plist.
2012-11-20 10:02:58.116 testCB21[5047:c07] FAILED pluginJSON = ["INVALID","ChildBrowser","openExternal",["http://www.apple.com",null]]

I'm at wits' end, here... what am I screwing up, or not seeing? Obviously, other people seem to be able to get this to work, so what am I missing?

I'm using XCode 4.5.2, targeting iOS 6.0 (I've tried 5.1 as well, and no difference). I've also tried the advice that someone else here gave of having my plugin reference ChildBrowser (string) ChildBrowserCommand and that doesn't do anything different, either.

Any leads on this would be most gratefully welcome!

MaartenR35 commented 11 years ago

And if you try to added this line:

var cb = ChildBrowser.install(); (before windows.plugins.childbrowser.openExternal('http://www.apple.com');)?

On Tue, Nov 20, 2012 at 4:21 PM, jbatchelor notifications@github.comwrote:

This will be Day 2 of trying to get this thing to work. First off, I have to say that the instructions for installation of this plugin are scattered all over the place. It would be nice if the developer would kindly consolidate and give us an official installation procedure guide that is reproducible 100% of the time.

I have tried creating a Cordova project per the Cordova guide (go to the ios/bin folder, ./create, etc), and launching the Cordova app doesn't seem to be at issue, here. However, I have tried following what scattered instructions I could find, and this is what I /think/ the procedure is supposed to be:

  1. Open your XCode project.
  2. Drag and drop all the library files from the ChildBrowser-master/src/ios folder onto the Plugins folder of your XCode project's structure.
  3. Check the "Copy items into destination group's folder (if needed)" box, and leave Create folder references for any added folders" selected by default, and click Finish.
  4. To the Cordova.plist file, under the ExternalHosts item, add a url to whitelist (in this case *) 5.

    To the Cordova.plist file, under Plugins, add two items:

  5. ChildBrowser (string) childbrowser.js
  6. ChildBrowserCommand (string) ChildBrowserCommand 6.

    Add to your index.html file a script reference to childbrowser.js, after your script include of cordova. 7.

    Copy (in the Finder) childbrowser.js from the ChildBrowser-master/www folder to the www folder of your project. 8.

    Add a link to your index.html file. In my case, for testing purposes, I added Test Link 9.

    In the js/index.js file that comes from the base ./create of the project, I added:

onDeviceReady: function() { app.receivedEvent('deviceready'); var link = document.getElementById("btnTest"); link.addEventListener('click', function() { console.log('Link clicked!'); window.plugins.childBrowser.openExternal('http://www.apple.com'); }); },

I Run the Emulator, and I can see that the click event is being hit, in the console. However, after that, I get the following errors:

2012-11-20 10:02:58.114 testCB21[5047:c07] CDVPlugin class childbrowser.js (pluginName: ChildBrowser) does not exist. 2012-11-20 10:02:58.115 testCB21[5047:c07] ERROR: Plugin 'ChildBrowser' not found, or is not a CDVPlugin. Check your plugin mapping in Cordova.plist. 2012-11-20 10:02:58.116 testCB21[5047:c07] FAILED pluginJSON = ["INVALID","ChildBrowser","openExternal",["http://www.apple.com",null]]

I'm at wits' end, here... what am I screwing up, or not seeing? Obviously, other people seem to be able to get this to work, so what am I missing?

I'm using XCode 4.5.2, targeting iOS 6.0 (I've tried 5.1 as well, and no difference). I've also tried the advice that someone else here gave of having my plugin reference ChildBrowser (string) ChildBrowserCommand and that doesn't do anything different, either.

Any leads on this would be most gratefully welcome!

— Reply to this email directly or view it on GitHubhttps://github.com/alunny/ChildBrowser/issues/28.

jbatchelor commented 11 years ago

ChildBrowser.install() is deprecated (and will alert you to this in the log).

No, my problem, it appears, is missing the little note on the front page here that states that openExternal() is Android-only.

Could I suggest instead of making it Android-only (and could someone explain to me why if it's Android-only, there is an event hook for onOpenExternal that states it's iOS-only??), that there be a nice little wrapper in childbrowser.js something like this:

    /**
     * Display a new browser with the specified URL.
     * This method starts a new web browser activity.
     *
     * @param url           The url to load
     * @param usePhoneGap   Load url in PhoneGap webview [optional]
     */
    ChildBrowser.openExternal = function(url, usePhoneGap) {
        if(device.platform.toLowerCase() == 'android'){
            if (usePhoneGap) {
                navigator.app.loadUrl(url);
            } else {
                cordova.exec(null, null, "ChildBrowser", "openExternal", [url, usePhoneGap]);
            }
        } else {
            ChildBrowser.showWebPage(url);
        }
    };

... or is opening in a new Safari window something that the developer is still working on, and intends to implement in his classes soon?

Either way, my fixes to make this work:

alunny commented 11 years ago

I've changed the JS now, thanks

stefek99 commented 11 years ago

Goal: get Filepicker up and running in a PhoneGap app - https://github.com/Filepicker/filepicker-phonegap - "Filepicker.io also requires the ChildBrowser plugin"

The most detailed tutorial on how to get started: http://blog.digitalbackcountry.com/2012/03/installing-the-childbrowser-plugin-for-ios-with-phonegapcordova-1-5/

It requires editing Cordova.plist as of Cordova 2.3 there is config.XML so I decided to use Cordova 2.2 (just to follow tutorial step by step)

Key: ChildBrowser, Type:String, Value: childbrowser.js (lowercase letters as https://github.com/alunny/ChildBrowser uses lowercase naming)
Key: ChildBrowserCommand, Type:String, Value:ChildBrowserCommand
External Hosts
Key: Item 0, Type: String, Value: *.google.com

Cordova.plist

In index.html I've included childbrowser.js

<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="childbrowser.js"></script>

And in js/index.js I would like to fire childbrowser:

    onDeviceReady: function() {
        app.receivedEvent('deviceready');

        window.plugins.childBrowser.showWebPage('http://www.google.com',
                                                { showLocationBar: true });
    },

Here is the result:

2013-04-05 07:35:22.303 Success[27167:907] ERROR: Plugin 'ChildBrowser' not found, or is not a CDVPlugin. Check your plugin mapping in Cordova.plist.
2013-04-05 07:35:22.305 Success[27167:907] -[CDVCommandQueue executePending] [Line 102] FAILED pluginJSON = ["ChildBrowser993664005","ChildBrowser","showWebPage",["http://www.google.com",{"showLocationBar":true}]]

Searching for "Plugin 'ChildBrowser' not found, or is not a CDVPlugin" and this GitHub issue is in TOP 10 results.

Yes, Virginia, you MUST put ChildBrowser (string) ChildBrowserCommand in your Cordova.plist Plugins list Fix childbrowser.js as per the code above (it's done already)

1) See screenshot above. 2) Already fixed in github.

NB

                console.log("Just about to execute gap.exec(null, null, 'ChildBrowser'");
                gap.exec(null, null, "ChildBrowser", "openExternal", [url, usePhoneGap]);
                console.log("After execution");

There is no output in the console so I assume it fails quicker, that is fails to load window.plugins.childBrowser in onDeviceReady handler.

Tried renaming childbrowser.js to be ChildBrowser.js and changing plist (CamelCase for consistency) but it doesn't solve the problem. You know your stuff, maybe you can help?

stefek99 commented 11 years ago

OK.

Made two mistakes: 1) ChildBrowser and ChildBrowserCommand should go under Plugins (not Root) subtree 2) I found out in a closed issue on the plugin's GitHub that the ChildBrowser string has to map to ChildBrowserCommand, not childbrowser.js! via http://comments.gmane.org/gmane.comp.handhelds.phonegap/40854

FYI: Someone got seriously frustrated here http://joelchu.com/phonegap-childbrowser-pain-in-the-a-i-hate-people-dont-know-how-to-write-instruction/

Screen Shot 2013-04-05 at 19 39 44

(I was never good at figuring out building scripts and compiler dependencies neither)